Bootstrap 3 Navbar com logotipo

376

Desejo usar a barra de navegação padrão do Bootstrap 3 com um logotipo de imagem em vez da marca do texto. Qual é a maneira correta de fazer isso sem causar problemas com diferentes tamanhos de tela? Presumo que isso seja um requisito comum, mas ainda não vi um bom exemplo de código. Um requisito essencial que não seja a exibição aceitável em todos os tamanhos de tela é a capacidade de recolhimento do menu em telas menores.

Tentei apenas colocar uma marca IMG dentro da marca A que possui a classe navbar-brand, mas que fazia com que o menu não funcionasse corretamente no meu telefone Android. Eu também tentei aumentar a altura da classe navbar, mas isso estragou ainda mais as coisas.

A propósito, minha imagem do logotipo é maior que a altura da barra de navegação.

stepanian
fonte
2
<img src="logo.png" width="27px" />: ajuste
Uday Hiwarale
29
Com todas as respostas enviadas a esta pergunta, por que uma delas não foi marcada como a solução?
precisa
11
Duas razões, eu acho: 1. Se alguém muda o estilo do site, a dimensão é fixada no HTML e não no CSS, por isso cria um pesadelo de manutenção. 2. Não deveria ser height = "27px", afinal? É a altura, não a largura, essa é a restrição.
Canuck
O atributo width e height assumem que o valor está em pixels; portanto, você não deve adicionar 'px' ao valor. width="27"
jmmeijer
Tudo considerado, esta é a melhor resposta e deve ser aceita stackoverflow.com/a/26333342/171456 . Ele serve a necessidade da comunidade mais ampla SO que visitaram esta questão desde 2013.
Zim

Respostas:

420

Por que todo mundo está tentando fazer da maneira mais difícil? Claro, algumas dessas abordagens funcionam, mas são mais complicadas do que o necessário.

OK, primeiro - você precisa de uma imagem que caiba na sua barra de navegação. Você pode ajustar sua imagem através do atributo de altura css (permitindo a largura da escala) ou apenas uma imagem de tamanho adequado. Tudo o que você decidir fazer - a aparência dependerá do tamanho da sua imagem.

Por alguma razão, todo mundo quer colar a imagem dentro de uma âncora navbar-brande isso não é necessário. navbar-brandaplica estilos de texto que não são necessários para uma imagem, bem como para a navbar-leftclasse (assim como puxar para a esquerda, mas para uso em uma barra de navegação). Tudo o que você realmente precisa é adicionar navbar-left.

<a href="#" class="navbar-left"><img src="/path/to/image.png"></a>

Você pode até seguir isso com um item de marca da barra de navegação, que aparecerá à direita da imagem.

Michael
fonte
43
Eu acho que a razão pela qual as pessoas colocam a imagem dentro de uma tag âncora é beacause que é como o doc Boostrap faz: getbootstrap.com/components/#navbar-brand-image
cafonso
9
e se você quiser usar uma imagem maior?
StevenP
5
@cafonso - não estou dizendo que não pertence a uma âncora - apenas que a âncora não precisa da classe "navbar-brand". Quando essa aula está presente - ela realmente mexe com a maneira como as imagens são exibidas.
Michael
4
@cafonso faz um ótimo ponto. Acredito que o TWBS pretendeu que isso fosse usado para uma imagem ou texto. E considerar quantas pessoas tiveram problemas com isso deve ser uma indicação de que é hora de corrigi-lo ou esclarecê-lo em seus documentos.
Bryan Willis #
3
@ Michael, os exemplos oficiais de documentação do Bootstrap mostram a âncora da classe navbar-brand. Essa é a fonte da confusão.
Justin Skiles
148
<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" 
            data-target=".navbar-ex1-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" rel="home" href="#" title="Buy Sell Rent Everyting">
        <img style="max-width:100px; margin-top: -7px;"
             src="/img/transparent-white-logo.png">
    </a>
</div>
Vicky
fonte
5
para que serve a margem negativa?
Ayrad
3
A margem negativa ajudou a centralizá-la verticalmente para mim.
Palavras como Jared
3
Após o comentário de Edward ... ou pelo menos uma demonstração de trabalho
Matías Cánepa
Você não deveria estar mexendo com margens negativas (a menos que a imagem tenha sido cortada de maneira engraçada). Dessa forma, não é uma solução sólida, pois depende completamente do tamanho do logotipo e terá que ser ajustado caso a caso. Aqui está uma demonstração funcional desse método .
Bryan Willis
11
Uma opção melhor que funcionará consistentemente, independentemente do tamanho / proporção do logotipo, é fazer o que .img-responsivo faz, exceto revertê-lo. Como a marca .navbar flutuou: aplicada à esquerda, ela se torna um elemento de bloco e, como tem uma altura de 50px, podemos definir a altura máxima da imagem para 100%; e NUNCA transbordará ou fará com que a barra de navegação inteira cresça. Ele fica restrito a ajustar-se à altura da marca .navbar. Se parecer pequeno demais na barra de navegação padrão de 50 px, ajuste o preenchimento superior e inferior .navbar-brand> img. Aqui está a resposta completa com a demonstração de trabalho
Bryan Willis
73

Redimensionamento do logotipo da barra de navegação do Bootstrap 3

DEMO COMPLETO COM MUITOS EXEMPLOS

ATUALIZAÇÃO IMPORTANTE: 21/12/15

Atualmente, há um bug no Mozilla que descobri que quebra a barra de navegação em determinadas larguras do navegador com MUITOS DEMOS NESTA PÁGINA . Basicamente, o bug do mozilla está incluindo o preenchimento esquerdo e direito no link da marca da barra de navegação como parte da largura da imagem. No entanto, isso pode ser corrigido facilmente e eu testei isso e tenho certeza de que é o exemplo de trabalho mais estável nesta página. Ele será redimensionado automaticamente e funcionará em todos os navegadores.

Basta adicionar isso ao seu css e usar navbar-brand da mesma maneira que você faria .img-responsive. Seu logotipo caberá automaticamente

.navbar-brand {
  padding: 0px; /* firefox bug fix */
}
.navbar-brand>img {
  height: 100%;
  padding: 15px; /* firefox bug fix */
  width: auto;
}

Outra opção é usar uma imagem de fundo. Use uma imagem de qualquer tamanho e defina a largura desejada:

.navbar-brand {
  background: url(http://disputebills.com/site/uploads/2015/10/dispute.png) center / contain no-repeat;
  width: 200px;
}


RESPOSTA ORIGINAL ABAIXO (apenas para referência)

As pessoas parecem esquecer muito o ajuste de objetos. Pessoalmente, acho que é o mais fácil de trabalhar, porque a imagem se ajusta automaticamente ao tamanho do menu. Se você apenas usar o ajuste de objeto na imagem, ele será redimensionado automaticamente para a altura dos menus.

    .navbar-brand > img {
      max-height: 100%;
      height: 100%;
      -o-object-fit: contain;
      object-fit: contain;
    }

Foi apontado que isso não funciona no IE "ainda". Existe um polyfill , mas isso pode ser excessivo se você não planeja usá-lo para qualquer outra coisa. Parece que o ajuste de objeto está sendo planejado para uma versão futura do IE; assim que isso acontecer, funcionará em todos os navegadores.

No entanto, se você notar a classe responsiva .img no bootstrap, a largura máxima está assumindo que você está colocando essas imagens em colunas ou algo que seja explícito com set. Isso significa que 100% significa especificamente 100% de largura do elemento pai.

    .img-responsive
        max-width: 100%;
        height: auto;
    }

O motivo pelo qual não podemos usar isso com a barra de navegação é porque o pai (marca .navbar) tem uma altura fixa de 50px, mas a largura não está definida.

Se pegarmos essa lógica e a revertermos para responder com base na altura, poderemos ter uma imagem responsiva que seja dimensionada para a altura da marca .navbar e, adicionando e ajustando automaticamente a largura, ela será ajustada à proporção.

max-height: 100%;
width: auto;

Normalmente teríamos que adicionar display:block;ao cenário, mas como a navbar-brand já possui float: left; aplicado a ele, ele atua automaticamente como um elemento de bloco.


Você pode encontrar a rara situação em que seu logotipo é muito pequeno. A abordagem responsiva ao img não leva isso em consideração, mas faremos. Ao adicionar também o atributo "height" ao, .navbar-brand > imgvocê pode ter certeza de que ele aumentará ou diminuirá.

max-height: 100%;
height: 100%;
width: auto;

Então, para completar, juntei os dois e parece funcionar perfeitamente em todos os navegadores.

<style type="text/css">
.navbar-brand>img {
   max-height: 100%;
   height: 100%;
   width: auto;
   margin: 0 auto;


   /* probably not needed anymore, but doesn't hurt */
   -o-object-fit: contain;
   object-fit: contain; 

}
</style>

<nav class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="http://disputebills.com"><img src="http://disputebills.com/site/uploads/2015/10/dispute.png" alt="Dispute Bills"></a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div>
      </div>
</nav>

DEMO http://codepen.io/bootstrapped/pen/KwYGwq

Bryan Willis
fonte
Obrigado José. Não funciona no IE que eu nunca soube até agora. Eu editei a resposta do seu comentário. Além disso, não tenho muita certeza se a altura e a altura máxima são necessárias.
Bryan Willis
Certo! O ajuste de objeto tem sido uma das adições mais destacadas do mecanismo webkit / blink. Espero que outro navegador os integre em breve! Enquanto isso, usaremos imagens de fundo para fazer o trabalho duro!
Jose A
11
Hey Jose, na verdade, só descobri algo. Confira a nova demonstração. Na verdade, parece que minha resposta original estava funcionando em todos os outros navegadores não por causa do ajuste do objeto, mas por causa da altura e da altura máxima. Eu acho que é tudo o que é realmente necessário ... Você pode encontrar uma situação em que as opções acima não funcionem agora?
Bryan Willis
Eu nem acho que o ajuste do objeto é necessário, pois a altura e a altura máx são redimensionadas para a altura do contêiner, como faria o .img-responsive.
Bryan Willis
José, você acha que o ajuste de objetos está fazendo alguma coisa? Acho que provavelmente podemos abandonar esse caso, mas não tenho certeza?
Bryan Willis
23

Embora sua pergunta seja interessante, não espero que haja uma resposta para ela. Talvez sua pergunta seja muito ampla. Sua solução deve depender de: outro conteúdo na barra de navegação (número de itens), tamanhos do logotipo, se o logotipo funcionar como responsivo etc. A adição do logotipo na a (com a marca da barra de navegação) parece um bom ponto de partida. Eu devo usar a classe navbar-brand porque isso adicionará um preenchimento (superior / inferior) de 15 pixels.

Testei essa configuração em http://getbootstrap.com/examples/navbar/ com um logotipo de 300 x 150 pixels.

Tela inteira> 1200:

insira a descrição da imagem aqui

entre 768 e 992 pixels (menu não recolhido):

insira a descrição da imagem aqui

<768 (menu recolhido)

insira a descrição da imagem aqui

Além dos aspectos estéticos, não encontrei nenhum problema técnico. Em telas pequenas, um grande logotipo se sobrepõe ou rompe a janela de visualização, talvez. As telas entre 768 e 992 pixels também apresentam outros problemas quando o conteúdo não se encaixa em uma linha; veja, por exemplo: https://github.com/bassjobsen/jamedo-bootstrap-start-theme/issues/18

A barra de navegação padrão possui O exemplo da barra de navegação padrão adiciona uma margem inferior de 30px para que o conteúdo da sua barra de navegação nunca se sobreponha ao conteúdo da sua página. (as barras de navegação fixas terão problemas quando a altura da barra de navegação variar).

Você precisará de algumas consultas de CSS e mídia para adaptar a barra de navegação às suas necessidades em diferentes tamanhos de tela. Por favor, tente restringir sua pergunta. Descreva o problema encontrado no Android.

atualização, consulte http://bootply.com/77512 para obter um exemplo.

Em telas menores, como um telefone, o menu recolhido aparece acima do logotipo

troque o botão e o logotipo no seu código, primeiro o logotipo (defina float: deixado no logotipo)

Não há como alinhar os itens do menu a nada, exceto ao topo

defina o margin-toppara .navbar-collapse ul. Use a altura do logotipo menos a barra de navegação, para alinhar com a parte inferior ou (altura do logotipo - altura da barra de navegação) / 2 para centralizar

Bass Jobsen
fonte
11
Eu tentei esta opção. Os dois problemas são: 1) Em telas menores, como um telefone, o menu recolhido aparece acima do logotipo (mesmo se eu adicionar uma classe responsiva à img à tag img do logotipo) e 2) Não há como alinhar o menu. itens para qualquer coisa, exceto top. Qualquer outro ajuste faria com que o menu recolhido não funcionasse corretamente.
stepanian 27/08/13
23

Instruções sobre como criar uma barra de navegação com um logotipo maior que a altura padrão (50px):

Exemplo com um logotipo 100px x 100px, CSS padrão:

  1. Calcule a altura e (parte superior do estofamento + parte inferior do estofamento) do logotipo. Aqui 120 px (altura de 100 px + parte superior do preenchimento (10px) + parte inferior do preenchimento (10px))

  2. Vá para inicialização / personalização . Defina em vez da altura da barra de navegação 50px> 120px (50 + 70) e navbar-collapse-max-height de 340px a 410px (340 + 70). Baixar css.

  3. Neste exemplo, eu uso esta barra de navegação . Na marca navbar :

      <div class="navbar-header">
        ...
        </button>
        <a class="navbar-brand myLogo" href="#">
          <img src="yourLogo.jpg" />
        </a>
      </div>...

    adicione uma classe, por exemplo , myLogo e um img (seu logotipo)

    <a class="navbar-brand myLogo" href="#"><img src="yourLogo.jpg" /></a>.

  4. Adicionar CSS

    .myLogo {padding: 10px; }

  5. Adequado para outros tamanhos.

Exemplo

Sol
fonte
11
Solução mais sensata aqui. polegares para cima
user3718908
11
Essa deve ser a resposta aceita. Resolve o problema de redimensionar a barra de navegação para ajustar-se à imagem.
Greg Gum
14

Bem, finalmente consegui o mesmo problema, aqui está minha solução e testei em meu site nos três principais navegadores: Chrome, Firefox e Internet Explorer.

Antes de tudo, se você não estiver usando um logotipo baseado em texto, remova completamente a "navbar-brand", pois eu achei essa classe em particular a principal causa do meu menu de navegação recolhido dobrar.

Grite para user3137032 por me levar na direção certa.

Você precisa criar um contêiner de imagem responsivo personalizado, que chamei de "logotipo"

Aqui está a marcação HTML de inicialização:

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="@Url.Action(" Index ", "Home ")" class="logo"><img src="~/resources/images/Logo_Concept.png" /></a>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li>
          <a href="@Url.Action(" About ", "Home ")">
            <i class="glyphicon glyphicon-info-sign"></i> About
          </a>
        </li>
        <li>
          <a href="@Url.Action(" Contact ", "Home ")">
            <i class="glyphicon glyphicon-phone"></i> Contact
          </a>
        </li>
        <li>
          <a href="@Url.Action(" Index ", "Products ")">
            <i class="glyphicon glyphicon-tag"></i> Products
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>

E o código CSS:

.logo img {
width: 100% \9; /*Force IE10 and below to size SVG images correctly*/
max-width: 100%;
}

@media (max-width:480px) { 
.logo img {
    width: 70% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 70% !important;
}
}

@media (max-width:400px) { 
.logo img {
    width: 75% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 75%;
}
}

@media (max-width:385px) { 
.logo img {
    width: 70% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 70%;
}
}

@media (max-width:345px) { 
.logo img {
    width: 65% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 65%;
}
}

@media (max-width:335px) { 
.logo img {
    width: 60% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 60%;
}
}

@media (max-width:325px) { 
.logo img {
    width: 55% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 55%;
}
}

@media (max-width:315px) { 
.logo img {
    width: 50% \9; /*Force IE10 and below to size SVG images correctly*/
    max-width: 50%;
}
}

O valor em @media (largura máxima: x) pode variar de acordo com a largura das imagens do logotipo, a minha é de 368 px. As porcentagens também precisam ser alteradas, dependendo do tamanho do seu logotipo. A primeira consulta @media deve ser seu limite e a minha era a largura da imagem (368px) + o tamanho do botão recolhido (44px) + cerca de 60px e saiu para 480px, que é onde eu inicio o dimensionamento responsivo da imagem.

Certifique-se de remover minha sintaxe de barbear das partes HTML. Deixe-me saber se isso resolve o seu problema, ele corrigiu o meu.

Edit: Desculpe, eu perdi o problema de altura da barra de navegação. Existem algumas maneiras de fazer isso: pessoalmente, eu compilar o Bootstrap LESS com a altura da barra de navegação apropriada; para meus propósitos, uso 70px e a altura da imagem é 68 px. A segunda maneira de fazer isso é no próprio arquivo bootstrap.css, procure ".navbar" e altere min-height: para a altura do seu logotipo.

Derek Williams
fonte
Esta é a verdadeira resposta
StevenP
11
Remover a turma navbar-brandfez isso por mim.
Kai Hartmann #
14

Minha solução é adicionar css "display: inline-block" à tag img.

<img style="display: inline-block; height: 30px; margin-top: -5px">

DEMO: jsfiddle

Kuofp
fonte
13

Eu uso a classe responsiva img e, em seguida, defino uma largura máxima no aelemento. Como isso:

<nav class="navbar">
    <div class="navbar-header">
        <a class="navbar-brand" href="#">
            <img class="img-responsive" src="mylogo.png">
        </a>
    </div>
</nav>

e o CSS:

.navbar-brand {
    max-width: 50%;
}
dustinfarris
fonte
2
Acredito que isso significa que você está definindo a largura da imagem na sua <a>tag em vez da <img>tag, já que img-responsivedefine max-width="100%". Você pode explicar como isso é útil?
Michael Scheper
Michael traz um bom argumento. .image-responsivedestina-se ao redimensionamento de imagem com base em um contêiner explícito WIDTH da imagem e não no HEIGHT que é redimensionado com base na largura. Portanto, apesar do número de votos que isso conseguiu, NÃO vai funcionar aqui . No entanto, podemos usar o mesmo método que a imagem responsiva e aplicá-la à altura. Portanto, remova .img-responsive da equação e simplesmente defina max-height como navbar-brand . Veja minha resposta aqui .
Bryan Willis
5

Você deve usar o código como este:

<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" 
            data-target=".navbar-ex1-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a class="logo" rel="home" href="#" title="Buy Sell Rent Everyting">
        <img style=""
             src="/img/transparent-white-logo.png">
    </a>
</div>

A classe de uma tag deve ser "logo", não marca da barra de navegação.

NurlanXp
fonte
4

Depende da altura que você deseja que seu logotipo tenha.

A <a>altura padrão na barra de navegação é 20 px, portanto, se você especificar height: 20pxno seu logotipo, ele será bem alinhado.

No entanto, isso é meio pequeno para um logotipo, então optei por isso:

<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" 
            data-target=".navbar-ex1-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" rel="home" href="#" title="Brand">
        <img style="height: 30px; margin-top: -5px;"
             src="/img/brand.png">
    </a>
</div>

Isso aumenta a imagem em 30px e alinha verticalmente a imagem adicionando uma margem negativa ao topo (5px é metade da diferença entre o preenchimento de uma e o tamanho da imagem).

Como alternativa, você pode alterar o preenchimento do <a>elemento, por exemplo:

<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" 
            data-target=".navbar-ex1-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" rel="home" href="#" title="Brand" style="padding-top: 10px; padding-bottom: 10px">
        <img style="height: 30px;"
             src="/img/transparent-white-logo.png">
    </a>
</div>
cwohlman
fonte
4

Correção rápida : crie uma classe para você logoe defina heightcomo 28px. Isso funciona bem com a barra de navegação em todos os dispositivos. Observe que eu disse que funciona "BEM".

.logo {
  display:block;
  height:28px;
}
Brian Scramlin
fonte
3

Minha abordagem é incluir QUATRO imagens diferentes de tamanhos diferentes para telefones, tablets, desktops e desktops grandes, mas apenas mostrar ONE usando as classes de utilidade responsivas do bootstrap, como segue:

<!--<a class="navbar-brand" href="<?php echo home_url(); ?>/"><?php bloginfo('name'); ?></a>-->

        <a class="navbar-brand visible-xs" href="<?php echo home_url(); ?>/"><img src="/assets/logo-phone.png" alt="<?php bloginfo('name'); ?> Logo" /></a>
        <a class="navbar-brand visible-sm" href="<?php echo home_url(); ?>/"><img src="/assets/logo-tablet.png" alt="<?php bloginfo('name'); ?> Logo" /></a>
        <a class="navbar-brand visible-md" href="<?php echo home_url(); ?>/"><img src="/assets/logo-desktop.png" alt="<?php bloginfo('name'); ?> Logo" /></a>
        <a class="navbar-brand visible-lg" href="<?php echo home_url(); ?>/"><img src="/assets/logo-large.png" alt="<?php bloginfo('name'); ?> Logo" /></a>

Nota: Você pode substituir a linha comentada pelo código fornecido. Substitua o código php se você não estiver usando o wordpress.

Nota 2: Sim, isso adiciona solicitações ao servidor ao carregar a página, o que pode desacelerar um pouco, mas se você usar uma técnica de sprite css em segundo plano, é possível que o logotipo não seja impresso ao imprimir uma página e o código acima melhor SEO.

vascorola
fonte
Você pode usar um único <a> e ter apenas 4 diferentes <img>, um para cada tamanho.
Jonathan Vanasco
@ Jonathan Vanasco, eu ficaria interessado em ver como você faria isso #
AdRock
11
remova o visible-SIZEda aetiqueta e coloque-a na etiqueta img. <a class="navbar-brand"><img class="visible-xs"/><img class="visible-sm"/></a>
Jonathan Vanasco
3

Você não precisa adicionar CSS adicional, pois o Bootstrap3 o fornece. A menos que você queira adicioná-lo. Este é o meu código para colocar o logotipo à esquerda e os links à direita. Esta navegação é responsiva. Faça alterações conforme desejar.

HTML:

<nav class="navbar navbar-expand-lg navbar-light fixed-top" style="background-color:white;">
        <div class="container">
        <a class="navbar-brand" href="#"><img style="   width: 150px;" src="image.jpg" alt="Image text"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
        </button>
            <div class="collapse navbar-collapse" id="navbarResponsive">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item"><a class="nav-link" href="#">Home</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Projects</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Blog</a></li>
                    <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
                </ul>
            </div>
        </div>
    </nav>
Krista A.
fonte
2

Também o implemento via propriedade de fundo css. Funciona saudável em qualquer valor de largura.

.navbar-brand{
    float:left;
    height:50px;
    padding:15px 15px;
    font-size:18px;
    line-height:20px;
    background-image: url("../images/logo.png");
    background-repeat: no-repeat;
    background-position: left center
}
crx4
fonte
2

Outra abordagem é implementar a .text-hideclasse interna do Bootstrap ao lado de .navbar-brandsubstituir o texto / conteúdo da marca por uma imagem de plano de fundo.

CSS:

.navbar-brand{ 
  background: url(http://example.com/your-logo-here.png) center / contain no-repeat;
  width: 200px;
}

HTML:

<a class="navbar-brand text-hide" href="#">Navbar Brand</a>

Este é um método muito consistente e mantém sua imagem centralizada. Para ajustar o tamanho da imagem, tudo o que você precisa fazer é ajustar.navbar-brand largura, pois a altura já está definida.

Aqui está uma demonstração ao vivo

Bryan Willis
fonte
2

Eu tive o mesmo problema. Eu resolvi assim:

<a href="#" class="btn btn-link navbar-btn">
  <img class="img-responsive" src="#">
</a>

Não há classe de marca da barra de navegação. O resultado parece uma imagem do logotipo que se encaixa na barra de navegação e funciona como um link. Também recomendo usar a classe navbar-right para os itens de menu para que eles não fiquem abaixo do logotipo.

<div class="collapse navbar-collapse navbar-right">
  <ul class="nav navbar-nav" role="navigation">
    <li><a href="#">Item1</a></li>
    <li><a href="#">Item2</a></li>
  </ul>
</div>
margem
fonte
1

Talvez isso seja muito simples, mas eu apenas copiei a linha da marca da barra de navegação para que haja duas delas, a imagem e o texto.

<a class="navbar-brand" href="index.php"><img class="img-responsive" src="images/my-icon.png" width="30" height="25" alt=" "></a>
<a class="navbar-brand" href="index.php">My Brand</a>

E eu criei uma imagem que cabe dentro da barra de navegação (aproximadamente 1/2 da altura).

twiddly
fonte
1

Se estiver usando LESS, isso funcionará:

@navbar-height: 150px;
@navbar-brand-vpadding: 10px;

.navbar-brand img {
  height: @navbar-height - @navbar-brand-vpadding * 2;
  position: absolute;
  top: @navbar-brand-vpadding;
}
XåpplI'-I0llwlg'I -
fonte
1

Esse código funciona perfeitamente se você precisar ver a marca centralizada e com largura automática na barra de ferramentas. Ele contém a função Wordpress para obter o arquivo de imagem do caminho certo:

<a class="navbar-brand page-scroll" rel="home" 
    href="#page-top"  title="Title">
    <img style="height: 100%; width: auto;" 
          src="<?php echo get_template_directory_uri();?>/img/logo.png">

Taras Vovkovych
fonte
1

Adicione o seguinte à .navbar-brandclasse

.navbar-brand
{
  padding: 0px; // this allows the image to occupy all the padding space of the navbar--brand
}

.navbar-brand > img
{
   height: 100%; // set height to occupy full height space on the navbar-brand
   width: auto; // width should be auto to allow img to scale accordingly
   max-height: 100%; // optional
   mrgin: 0 auto; // optional
}
Jose Mhlanga
fonte
0

meu código de trabalho - bootstrap 3.0.3. quando navbar-toggle, oculta-xs imagem do logotipo original.

    <a class="navbar-brand hidden-xs" href="<?=$g4['path']?>/">
    <img src="<?=$g4[path]?>/images/logo_opencode.gif" align=absmiddle alt="brand logo">
    </a>

    <a class="navbar-brand navbar-toggle" href="<?=$g4['path']?>/" style="border:0;margin-bottom:0;">
    <img src="<?=$g4[path]?>/images/logo_opencode.gif" alt="brand logo" style="width:120px;">
    </a>
OpenCode
fonte
0

Você pode tentar usar a consulta @media, como abaixo.

Adicione uma classe de logotipo primeiro e use @media para especificar a altura e a largura do logotipo por tamanho de dispositivo. No exemplo abaixo, estou segmentando dispositivos com largura máxima de 320px (iPhone). Você pode brincar com isso até encontrar o melhor ajuste. Maneira fácil de testar: use chrome ou Firefox com o elemento inspecionar. Reduza o seu navegador o máximo possível. Observe a alteração do tamanho do logotipo com base na largura máxima da mídia especificada. Teste no iPhone, dispositivos Android, iPad etc. para obter os resultados desejados.

.logo {
  height: 42px;
  width: 140px;
}

@media (max-width:320px) { 
.logo {
  height: 33px;
  width: 110px;
}
}
user3137032
fonte
0

Por favor, tente o seguinte código:

<style>
   .navbar a.navbar-brand {padding: 9px 15px 8px; }
</style>
<a class="navbar-brand" href="#">
   <img src="http://placehold.it/140x34/000000/ffffff/&amp;text=LOGO" alt="">
</a>
Dhaval Solanki
fonte
0

Não consegui fazer nenhuma das outras respostas funcionarem no meu caso (provavelmente não passei no teste de inteligência) e após algumas experiências, é isso que estou usando (que acredito estar muito próximo do padrão do Bootstrap):

   <div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="navbar-header">
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
         </button>
         <div class="navbar-logo">
            <a class="navbar-brand" rel="home" href="@Url.Action("Index", "Home")" title="Home">
               <img src="~/Images/logo.png" class="img-responsive">
            </a>
         </div>
         <div class="collapse navbar-collapse" id="navbar-collapse">
            <ul class="nav navbar-nav">
               <li>@Html.ActionLink("Home", "Index", "Home")</li>
               <li>@Html.ActionLink("Coaching", "Coaching", "Home")</li>
               <li>@Html.ActionLink("Resources", "Resources", "Home")</li>
               <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
               <li>@Html.ActionLink("Blog", "Blog", "Home")</li>
               <li>@Html.ActionLink("About", "About", "Home")</li>
            </ul>
         </div>
      </div>
   </div>

E no arquivo CSS, adicionei o seguinte:

.navbar-brand {
   padding-top: 5px;
}

.navbar-collapse {
   float: left;
}

.navbar-logo {
   float: left;
}

Observe que @Html.ActionLink()é a sintaxe do Razor para uma <a>tag. Onde está escrito, @Html.ActionLink(...)substitua-o por uma <a>tag apropriada . Igualmente onde diz, @Url.Action(...)substitua-o por um URL apropriado (nenhuma <a>tag nesse caso).

Manfred
fonte
0

Isso não é semântico, mas apenas uso o aelemento existente , defino uma imagem de plano de fundo e, em seguida, crio várias variações para resolução @ 2x, tamanhos de tela menores etc.

Em seguida, você pode usar a .text-hideclasse para obter algum texto na página da maneira antiga. Uso simples e eficaz, embora não adequado, de uma imagem.

Aqui está um link para a classe auxiliar para substituição de texto:

http://getbootstrap.com/css/#helper-classes

Ken Prince
fonte
0

A melhor e mais fácil resposta para essa pergunta é definir uma largura e altura máximas, dependendo do seu logotipo, a imagem terá no máximo 50px de altura, mas não mais que 200px.

<a href="index.html">
<img src="imgs/brand-w.png" style="max-height:50px;max-width:200px;">
</a>

Isso variará dependendo do tamanho do logotipo e dos itens da barra de navegação que você possui.

Theo Leinad
fonte
0
<header class="navbar navbar-inverse header-outer" role="banner">
  <div class="container form-inline">
    <img src="@Url.Content(" ~/Content/img/Logo-Sample.png ")" alt="Image" id="logo" class="img-responsive pull-left" />

    <div class="pull-right padding-top">
      <form class="hidden-xs" role="form">

        <div class="form-group" style="padding-left:10px">
          <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Username">
        </div>

        <div class="form-group">
          <input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
        </div>
        <div class="form-group navbar-remember">
          <label class="white-font">
            <input type="checkbox" class="white-font"> Remember me
          </label>
        </div>
        <button type="button" class="btn btn-primary form-group" title="Sign In">Sign In</button>
      </form>
    </div>
  </div>

</header>

Por favor, entenda o código com seu próprio esforço: D Este é o meu rascunho de código e já está funcionando :) Aqui está a captura de tela.

insira a descrição da imagem aqui

LYKS
fonte
0

Em vez de substituir a marca do texto, eu me dividi em duas linhas, como no código abaixo, e dei img-responsiveclasse à imagem ......

<div class="collapse navbar-collapse navbar-ex1-collapse" style="background: #efefef; height:auto;">
  <div class="container" style="margin-bottom:-1px;">
    <div class="row">
      <div class="col-md-3">
        <div id="menubar-logo">
          <a href="index.html"><img src="img/tl_logo.png" class="img-responsive" alt="Triple Luck IT Service Logo"></a>
        </div>
      </div>
      <div class=" col-md-offset-3 col-md-6">

        <ul class="nav navbar-nav">
          <li><a href="index.php" class="active">Home</a></li>
          <li><a href="about_us.php">About Us</a></li>
          <li><a href="contact_us.php">Contact Us</a></li>
        </ul>
      </div>
    </div>
    <!-- end of "row" -->
  </div>
  <!-- end of "container" -->
</div>
<!-- end of "collapse" -->

e além disso, adicionei os seguintes códigos css .......

#menubar-logo img {
  margin-top: 10px;
  margin-bottom: 20px;
  margin-right: 10px;
}

Se meu código resolver seu problema, é um prazer ...

IZ
fonte
0
 <div class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header" >
               <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                   <span class="sr-only">Toggle navigation</span>
                   <span class="icon-bar"></span>
                   <span class="icon-bar"></span>
                   <span class="icon-bar"></span>

                   </button>
                <a class="navbar-brand" href="Default.aspx"> <span> <img alt="Logo" src="Images/shopify-bag.png"height="35" width="40"/></span> Shopping GO</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right"></ul>

// Não se esqueça de adicionar bootstrap na cabeça do seu código.

Ch UmarJamil
fonte