Bootstrap 3 Navbar com Logo

Eu quero usar a barra de navegação padrão do Bootstrap 3 com um logotipo de imagem em vez de marca de texto. Qual é a maneira correta de fazer isso sem causar problemas com diferentes tamanhos de canvas? Eu assumo isso como um requisito comum, mas ainda não vi um bom exemplo de código. Um requisito importante, além de ter uma exibição aceitável em todos os tamanhos de canvas, é a capacidade de recolhimento do menu em canvass menores.

Eu tentei apenas colocar uma tag IMG dentro da tag A que tem a class navbar, mas isso fez com que o menu não funcionasse corretamente no meu telefone Android. Eu também tentei aumentar a altura da class navbar, mas isso estragou as coisas ainda mais.

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

Por que todo mundo está tentando fazer isso da maneira mais difícil? Claro, algumas dessas abordagens funcionarão, 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 css height (permitindo que a largura seja dimensionada) ou você pode simplesmente usar uma imagem de tamanho adequado. O que quer que você decida fazer – a maneira como isso parece dependerá de quão bem você dimensiona sua imagem.

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

  

Você pode até acompanhar isso com um item da marca navbar, que aparecerá à direita da imagem.

  

Bootstrap 3 redimensionamento do logotipo navbar

DEMONSTRAÇÃO COMPLETA 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 de navegador com MUITOS DEMORES NESTA PÁGINA . Basicamente, o bug do mozilla inclui o preenchimento da esquerda e da direita no link da marca navbar como parte da largura da imagem. No entanto, isso pode ser corrigido facilmente e eu testei isso e tenho certeza 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 a marca navbar da mesma maneira que você faria .img-responsive . Seu logotipo se ajustará 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, em seguida, basta definir 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 se esquecer muito do ajuste de objects. Pessoalmente, acho que é o mais fácil de se trabalhar porque a imagem se ajusta automaticamente ao tamanho do menu. Se você simplesmente usar o ajuste de object na imagem, ele será redimensionado automaticamente para a altura do menu.

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

Foi salientado que isso não funciona no IE “ainda”. Há um polyfill , mas isso pode ser excessivo se você não planeja usá-lo para mais nada. Parece que o ajuste do object está sendo planejado para uma versão futura do IE, então, uma vez que isso aconteça, isso funcionará em todos os navegadores.

No entanto, se você observar a class responsiva .img no bootstrap, o max-width está assumindo que você está colocando essas imagens em colunas ou algo que tenha um explícito com o conjunto. Isso significa que 100% significa especificamente 100% de largura do elemento pai.

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

A razão pela qual não podemos usar isso com a navbar é porque o pai (.navbar-brand) tem uma altura fixa de 50px, mas a largura não está definida.

Se pegarmos essa lógica e a invertermos para sermos responsivos com base na altura, poderemos ter uma imagem responsiva que se adapte à altura da marca .navbar e, ao adicionar e definir a largura automática, ela se ajustará à proporção.

 max-height: 100%; width: auto; 

Normalmente, teríamos que adicionar display:block; para o cenário, mas desde que a marca navbar já tem float: left; aplicado a ele, ele age automaticamente como um elemento de bloco.


Você pode se deparar com a rara situação em que seu logotipo é muito pequeno. A abordagem img-responsiva não leva isso em conta, mas nós o faremos. Ao também adicionar o atributo “height” à .navbar-brand > img você pode ter certeza de que ele aumentará ou diminuirá.

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

Então, para completar isso eu coloquei os dois juntos e parece funcionar perfeitamente em todos os navegadores.

   

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

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 de seu logotipo, se o logotipo agir de forma responsiva, etc. Adicionar o logotipo na marca a (com navbar) parece ser um bom ponto de partida. Eu deveria usar a class de marca navbar porque isso adicionará um preenchimento (parte superior / inferior) de 15 pixels.

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

Tela cheia> 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 canvass pequenas, um grande logotipo se sobrepõe ou rompe a janela de exibição, talvez. As canvass entre 768 e 992 pixels também apresentam outros problemas quando o conteúdo não cabe em uma linha, veja por exemplo: https://github.com/bassjobsen/jamedo-bootstrap-start-theme/issues/18

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

Você precisará de algumas consultas de mídia e CSS para adaptar a barra de navegação às suas necessidades em diferentes tamanhos de canvas. Por favor, tente restringir sua pergunta. seja descrever o problema que você encontrou no android.

update veja http://bootply.com/77512 para um exemplo.

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

Troque o botão e o logotipo em seu código, primeiro o logotipo (defina float: left no logo)

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

defina o margin-top da margin-top para .navbar-collapse ul . Use a altura do logotipo menos a altura da barra de navegação, para alinhar à parte inferior ou (altura do logotipo – altura da barra de navegação) / 2 ao centro

Instrução sobre como criar uma barra de navegação de bootstrap 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 (topo de estofamento + fundo de acolchoamento) do logotipo. Aqui 120px (100px altura + tampo de preenchimento (10px) + fundo de acolchoamento (10px))

  2. Goto bootstrap / customize . Ajuste em vez da altura da barra de navegação 50px> 120px (50 + 70) e navbar-collapse-max-height de 340px a 410px (340 + 70). Faça o download do css.

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

      ... 

    adicione uma class, por exemplo myLogo , e um img (seu logo)

    .

  4. Adicionar CSS

    .myLogo {padding: 10px; }

  5. Adequado para outros tamanhos.

Exemplo

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

Primeiro de tudo, se você não estiver usando um logotipo baseado em texto, remova completamente “navbar-brand”, pois acho que essa class em particular é a principal causa do meu menu de naves recolhido dobrar.

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

Você tem que fazer um recipiente de imagem responsivo personalizado, eu chamei meu “logo”

Aqui está a marca HTML de bootstrap:

  

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 (max-width: x) pode variar dependendo da largura das imagens do seu logotipo, o meu é 368px. As porcentagens também podem precisar ser alteradas dependendo do tamanho do seu logotipo. A primeira consulta @media deve ser o seu limite e a minha largura da imagem (368px) + tamanho do botão recolhido (44px) + cerca de 60px e saiu para 480px, que é onde inicio o dimensionamento da imagem responsiva.

Por favor, certifique-se de remover minha syntax de razor das partes HTML. Deixe-me saber se isso resolve seu problema, consertou o meu.

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

Eu uso a class img-responsive e, em seguida, defino uma largura máxima no elemento a. Como isso:

  

e o CSS:

 .navbar-brand { max-width: 50%; } 

Minha solução é adicionar css “display: inline-block” para img tag.

  

DEMO: jsfiddle

Você deve usar o código como este:

  

A tag de class A deve ser “logo” e não marca navbar.

Depende de quão alto você quer que seu logotipo seja.

A altura padrão na barra de navegação é de 20px, portanto, se você especificar a height: 20px no seu logotipo, ela se ajustará bem.

No entanto, isso é meio pequeno para um logotipo, então o que eu optei foi:

  

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

Alternativamente, você pode alterar o preenchimento do elemento , por exemplo:

  

Correção rápida : crie uma turma para seu logo e defina a height para 28px . Isso funciona bem com a barra de navegação em todos os dispositivos. Repare que eu disse funciona “bem”.

 .logo { display:block; height:28px; } 

Minha abordagem é include QUATRO imagens diferentes de tamanhos diferentes para telefones, tablet, desktop, área de trabalho grande, mas apenas mostrar UM usando classs de utilitário responsivo do bootstrap, como segue:

  <?php bloginfo('name'); ?/> Logo <?php bloginfo('name'); ?/> Logo <?php bloginfo('name'); ?/> Logo <?php bloginfo('name'); ?/> Logo 

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

Editar Nota 2: Sim, isso adiciona solicitações ao seu servidor ao carregar a página, o que pode desacelerar um pouco, mas se você usar uma técnica de plano de fundo, provavelmente o logotipo não será impresso ao imprimir uma página e o código acima deve melhor SEO.

Eu também implemento via propriedade de plano de fundo css. Trabalha healty 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 } 

Outra abordagem é implementar a class built-in .text-hide do .navbar-brand ao lado da .navbar-brand para replace o texto / conteúdo da marca por uma imagem de fundo.

CSS:

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

HTML:

 Navbar Brand 

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 da .navbar-brand já que a altura já está definida.

Aqui está uma demonstração ao vivo

Eu tive o mesmo problema. Eu resolvi assim:

    

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

  

Talvez isso seja simples demais, mas acabei de copiar a linha da marca navbar para que haja duas delas, a imagem e depois o texto.

   My Brand 

E criei uma imagem que cabe dentro da barra de navegação (aproximadamente a metade da altura).

Se usar menos, isso funciona:

 @navbar-height: 150px; @navbar-brand-vpadding: 10px; .navbar-brand img { height: @navbar-height - @navbar-brand-vpadding * 2; position: absolute; top: @navbar-brand-vpadding; } 

Este código funciona perfeito se você precisa ver a marca centralizada e com largura automática na barra de ferramentas. Ele contém a function WordPress para obter o arquivo de imagem do caminho certo:

   

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

    brand logo  

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

Adicione uma class de logotipo primeiro e use @media para especificar a altura e a largura de seu 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 o chrome ou o Firefox com o elemento inspecionar. Encolha seu navegador o mais longe possível. Observe a alteração do tamanho do logotipo com base na largura máxima de @media que você especificar. 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; } } 

Por favor, tente o seguinte código:

     

Deixar de fazer qualquer uma das outras respostas funcionar no meu caso (eu provavelmente não passei no teste de inteligência) e depois de alguma experimentação, é isso que estou usando (que acredito ser muito próximo do padrão do Bootstrap):

   

E no arquivo CSS eu adicionei o seguinte:

 .navbar-brand { padding-top: 5px; } .navbar-collapse { float: left; } .navbar-logo { float: left; } 

Note que @Html.ActionLink() é a syntax Razor para uma tag . Onde diz @Html.ActionLink(...) basta substituí-lo por uma tag apropriada. Igualmente onde diz https://stackoverflow.com/questions/18474564/bootstrap-3-navbar-with-logo/@Url.Action(...) substitua-o por um URL apropriado (sem tag nesse caso).

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

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

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

http://getbootstrap.com/css/https://stackoverflow.com/questions/18474564/bootstrap-3-navbar-with-logo/#helper-classs

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

    

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

  

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

insira a descrição da imagem aqui

Em vez de replace a marca de texto, eu dividi em duas linhas, como no código abaixo e deu class img-responsive à imagem ……

   

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

 https://stackoverflow.com/questions/18474564/bootstrap-3-navbar-with-logo/#menubar-logo img { margin-top: 10px; margin-bottom: 20px; margin-right: 10px; } 

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

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

HTML:

  
   

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