Bootstrap 3 Navbar com logotipo

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.

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.

<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>

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

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:

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

<768 (menu recolhido)

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

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

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.

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

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

DEMO: jsfiddle

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%;
}

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.

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>

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;
}

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.

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>

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
}

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

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>

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).

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;
}

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">

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
}

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>

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;
}
}

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>

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).

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

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.

<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.

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 ...

 <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.