Bootstrap 3 Navbar con logotipo

Quiero usar la barra de navegación predeterminada de Bootstrap 3 con un logotipo de imagen en lugar de la marca de texto. ¿Cuál es la forma correcta de hacer esto sin causar problemas con diferentes tamaños de pantalla? Supongo que este es un requisito común, pero aún no he visto un buen ejemplo de código. Un requisito clave además de tener una visualización aceptable en todos los tamaños de pantalla es la colapsabilidad del menú en pantallas más pequeñas.

Intenté simplemente poner una etiqueta IMG dentro de la etiqueta A que tiene la clase de marca de barra de navegación, pero eso hizo que el menú no funcionara correctamente en mi teléfono Android. También intenté aumentar la altura de la clase de barra de navegación, pero eso arruinó aún más las cosas.

Por cierto, la imagen de mi logotipo es más grande que la altura de la barra de navegación.

¿Por qué todos intentan hacerlo de la manera difícil? Claro, algunos de estos enfoques funcionarán, pero son más complicados de lo necesario.

OK, primero: necesita una imagen que se ajuste a su barra de navegación. Puede ajustar su imagen mediante el atributo css height (permitiendo el ancho a escala) o simplemente puede usar una imagen de tamaño apropiado. Independientemente de lo que decida hacer, la apariencia dependerá de qué tan bien dimensione su imagen.

Por alguna razón, todos quieren pegar la imagen dentro de un ancla navbar-brand, y esto no es necesario. navbar-brandaplica estilos de texto que no son necesarios a una imagen, así como a la navbar-leftclase (al igual que pull-left, pero para usar en una barra de navegación). Todo lo que realmente necesitas es agregar navbar-left.

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

Incluso puede seguir esto con un elemento de marca de barra de navegación, que aparecerá a la derecha de la imagen.

<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 COMPLETA CON MUCHOS EJEMPLOS

ACTUALIZACIÓN IMPORTANTE: 21/12/15

Actualmente hay un error en Mozilla que descubrí que rompe la barra de navegación en ciertos anchos del navegador con MUCHOS DEMOS EN ESTA PÁGINA . Básicamente, el error de mozilla incluye el relleno izquierdo y derecho en el enlace de la marca de la barra de navegación como parte del ancho de la imagen. Sin embargo, esto se puede solucionar fácilmente y lo he probado y estoy bastante seguro de que es el ejemplo de trabajo más estable en esta página. Se redimensionará automáticamente y funciona en todos los navegadores.

Simplemente agregue esto a su CSS y use la marca de la barra de navegación de la misma manera que lo haría .img-responsive. Tu logotipo se ajustará automáticamente

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

Otra opción es usar una imagen de fondo. Use una imagen de cualquier tamaño y luego simplemente configure el ancho deseado:

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

RESPUESTA ORIGINAL A CONTINUACIÓN (solo para referencia)

La gente parece olvidarse mucho del ajuste de objetos. Personalmente, creo que es el más fácil para trabajar porque la imagen se ajusta automáticamente al tamaño del menú. Si solo usa el ajuste de objeto en la imagen, se redimensionará automáticamente a la altura de los menús.

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

Se señaló que esto no funciona en IE "todavía". Hay un polyfill , pero eso podría ser excesivo si no planea usarlo para otra cosa. Parece que el ajuste de objetos se está planificando para una futura versión de IE, por lo que una vez que eso suceda, funcionará en todos los navegadores.

Sin embargo, si observa la clase .img-responsive en bootstrap, max-width está asumiendo que está colocando estas imágenes en columnas o algo que tiene un conjunto explícito. Esto significaría que 100% significa específicamente 100% de ancho del elemento padre.

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

La razón por la que no podemos usar eso con la barra de navegación es porque el padre (.navbar-brand) tiene una altura fija de 50 px, pero el ancho no está establecido.

Si tomamos que la lógica y revertir que sea sensible basado en la altura podemos tener una imagen sensible que las escalas a la altura .navbar-marca y añadiendo y ajuste automático de ancho se ajustará a la proporción.

max-height: 100%;
width: auto;

Por lo general, tendríamos que agregar display:block;al escenario, pero dado que navbar-brand ya tiene flotante: izquierda; aplicado a él, actúa automáticamente como un elemento de bloque.

Es posible que se encuentre con una situación poco frecuente en la que su logotipo es demasiado pequeño. El enfoque sensible a img no tiene esto en cuenta, pero lo haremos. Al agregar también el atributo "altura" .navbar-brand > img, puede estar seguro de que aumentará o disminuirá.

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

Entonces, para completar esto, los puse juntos y parece funcionar perfectamente en todos los 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

Aunque su pregunta es interesante, no espero que haya una respuesta. Tal vez tu pregunta es demasiado amplia. Su solución debe depender de: otro contenido en la barra de navegación (número de elementos), tamaños de su logotipo, si su logotipo debe responder, etc. Agregar el logotipo en a (con la marca de la barra de navegación) parece un buen punto de partida. Debería usar la clase navbar-brand porque esto agregará un relleno (superior / inferior) de 15 píxeles.

Probé esta configuración en http://getbootstrap.com/examples/navbar/ con un logotipo de 300x150 píxeles.

Pantalla completa> 1200:

Entre 768 y 992 píxeles (menú no contraído):

<768 (menú colapsado)

Además de los aspectos estéticos, no encontré ningún problema técnico. En pantallas pequeñas, un gran logotipo se superpondrá o romperá la ventana gráfica tal vez. Las pantallas entre 768 y 992 píxeles también tienen otros problemas cuando el contenido no cabe en una línea, ver por ejemplo: https://github.com/bassjobsen/jamedo-bootstrap-start-theme/issues/18

La barra de navegación predeterminada tiene El ejemplo de la barra de navegación predeterminada agrega un margen inferior de 30 píxeles para que el contenido de su barra de navegación nunca se superponga con el contenido de su página. (las barras de navegación fijas tendrán problemas cuando la altura de la barra de navegación varía).

Necesitará algunas consultas de CSS y medios para adaptar la barra de navegación a su necesidad en diferentes tamaños de pantalla. Por favor, trate de reducir su pregunta. Describa el problema que encontró en Android.

actualización ver http://bootply.com/77512 para un ejemplo.

En pantallas más pequeñas, como un teléfono, el menú contraído aparece encima del logotipo

intercambie el botón y el logotipo en su código, primero el logotipo (configure flotante: izquierda en el logotipo)

No hay forma de alinear los elementos del menú con nada excepto la parte superior

establecer el margin-toppara .navbar-collapse ul. Use la altura del logotipo menos la altura de la barra de navegación, para alinear a la parte inferior o (altura del logotipo - altura de la barra de navegación) / 2 al centro

Instrucciones sobre cómo crear una barra de navegación de arranque con un logotipo que sea más grande que la altura predeterminada (50 px):

Ejemplo con un logotipo de 100 px x 100 px, CSS estándar:

1. Calcule la altura y (relleno superior + relleno inferior) del logotipo. Aquí 120 px ( 100 px de altura + relleno superior (10 px) + relleno inferior (10 px))

2. Ir a bootstrap / personalizar . Establecer en lugar de navbar height 50px> 120px (50 + 70) y navbar-collapse-max-height de 340px a 410px (340 + 70). Descargar css.

3. En este ejemplo, uso esta barra de navegación . En navbar-brand :

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

   agregue una clase, por ejemplo myLogo , y un img (su logotipo)

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

4. Agregar CSS

   .myLogo {relleno: 10px; }

5. Adecuado para otros tamaños.

Ejemplo

Bueno, finalmente tuve este mismo problema, aquí está mi solución y la probé en mi sitio en los tres principales navegadores: Chrome, Firefox e Internet Explorer.

En primer lugar, si no está utilizando un logotipo basado en texto, elimine "navbar-brand" por completo, ya que esta clase en particular es la principal causa de que mi menú de navegación colapsado se duplique.

Grite al usuario3137032 por guiarme en la dirección correcta.

Tienes que hacer un contenedor de imagen sensible personalizado, llamé al mío "logo"

Aquí está el marcado HTML de bootstrap:

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

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

El valor en @media (max-width: x) puede variar según el ancho de las imágenes de su logotipo, el mío es de 368px. Es posible que también sea necesario cambiar los porcentajes dependiendo del tamaño de su logotipo. La primera consulta @media debería ser su umbral y el mío era el ancho de la imagen (368px) + el tamaño del botón contraído (44px) + aproximadamente 60px y salió a 480px, que es donde comienzo la escala de la imagen receptiva.

Asegúrese de eliminar la sintaxis de mi maquinilla de afeitar de las partes HTML. Avíseme si soluciona su problema, solucionó el mío.

Editar: Lo siento, me perdí el problema de altura de la barra de navegación. Hay un par de maneras de hacerlo, personalmente compilo el Bootstrap LESS con la altura de la barra de navegación adecuada, para mi uso utilizo 70 px y la altura de mi imagen es de 68 px. La segunda forma de hacerlo es en el archivo bootstrap.css, busque ".navbar" y cambie min-height: a la altura de su logotipo.

Mi solución es agregar css "display: inline-block" a la etiqueta img.

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

DEMO: jsfiddle

Uso la clase img-responsive y luego establezco un ancho máximo en el aelemento. Me gusta esto:

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

y el CSS:

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

Debe usar un 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>

La etiqueta de clase A debe ser "logo", no navbar-brand.

Depende de qué tan alto quieras que sea tu logotipo.

La <a>altura predeterminada en la barra de navegación es de 20 píxeles, por lo que si especifica height: 20pxen su logotipo, se alineará muy bien.

Sin embargo, eso es un poco pequeño para un logotipo, por lo que opté por esto:

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

Esto hace que la imagen tenga 30 píxeles de altura y alinea verticalmente la imagen agregando un margen negativo en la parte superior (5 píxeles es la mitad de la diferencia entre el relleno en ay el tamaño de la imagen).

Alternativamente, puede cambiar el relleno del <a>elemento, por ejemplo:

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

Solución rápida : cree una clase para usted logoy configúrela heighten 28px. Esto funciona bien con la barra de navegación en todos los dispositivos. Observe que dije que funciona "BIEN".

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

Mi enfoque es incluir CUATRO imágenes diferentes de diferentes tamaños para teléfonos, tabletas, computadoras de escritorio, computadoras de escritorio grandes, pero solo mostrar UNA utilizando las clases de utilidad receptiva de bootstrap, de la siguiente manera:

<!--<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: Puede reemplazar la línea comentada con el código provisto. Reemplace el código php si no está usando wordpress.

Nota de edición 2: Sí, esto agrega solicitudes a su servidor al cargar la página, lo que podría ralentizarse un poco, pero si usa una técnica de fondo css sprite, es probable que el logotipo no se imprima al imprimir una página y el código anterior debería aparecer Mejor SEO.

No debería necesitar agregar CSS adicional, ya que Bootstrap3 lo proporciona. A menos que quieras agregarlo. Este es mi código para poner el logotipo a la izquierda y los enlaces a la derecha. Esta navegación es receptiva. Haga cambios a esto como mejor le parezca.

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>

También lo implemento a través de la propiedad de fondo css. Funciona saludablemente en cualquier valor de ancho.

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

Otro enfoque es implementar la .text-hideclase integrada de Bootstrap junto con .navbar-brandpara reemplazar el texto / contenido de la marca con una imagen de fondo.

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 es un método muy consistente y mantiene su imagen centrada. Para ajustar el tamaño de la imagen, todo lo que necesita hacer es ajustar el .navbar-brandancho ya que la altura ya está configurada.

Aquí hay una demostración en vivo

Yo tuve el mismo problema. Lo resolví así:

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

No hay clase de marca de barra de navegación. El resultado parece una imagen del logotipo que se ajusta a la barra de navegación y funciona como un enlace. También recomiendo usar la clase navbar-right para los elementos del menú para que no vayan debajo del 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>

Tal vez esto sea demasiado simple, pero acabo de copiar la línea de marca de la barra de navegación para que haya dos, la imagen y luego el 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>

Y creé una imagen que cabe dentro de la barra de navegación (aproximadamente la mitad de la altura).

Si usa LESS, esto 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 perfecto si necesita ver la marca centrada y con el ancho automático en la barra de herramientas. Contiene la función Wordpress para obtener el archivo de imagen desde la ruta correcta:

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

Agregue lo siguiente a la .navbar-brandclase

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

mi código de trabajo - bootstrap 3.0.3. cuando navbar-toggle, hidden-xs imagen del 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>

Puede intentar usar la consulta @media como se muestra a continuación.

Agregue primero una clase de logotipo, luego use @media para especificar la altura y el ancho de su logotipo por tamaño de dispositivo. En el siguiente ejemplo, estoy apuntando a dispositivos que tienen un ancho máximo de 320 px (iPhone). Puedes jugar con esto hasta que encuentres la mejor opción. Manera fácil de probar: use Chrome o Firefox con el elemento de inspección. Reduzca su navegador lo más posible. Observe el cambio de tamaño del logotipo en función del ancho máximo de @media que especifique. Pruebe en iPhone, dispositivos Android, iPad, etc. para obtener los resultados deseados.

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

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

Intenta con el siguiente 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>

No puedo hacer que ninguna de las otras respuestas funcione en mi caso (probablemente no pasé la prueba de inteligencia) y después de un poco de experimentación, esto es lo que estoy usando (que creo que está muy cerca del valor predeterminado de 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>

Y en el archivo CSS he agregado lo siguiente:

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

.navbar-collapse {
   float: left;
}

.navbar-logo {
   float: left;
}

Tenga en cuenta que @Html.ActionLink()es la sintaxis de Razor para una <a>etiqueta. Donde dice @Html.ActionLink(...)simplemente reemplácelo con una <a>etiqueta apropiada . Igualmente donde dice @Url.Action(...)reemplazarlo con una URL apropiada (sin <a>etiqueta en ese caso).

Esto no es semántico, pero solo uso el aelemento existente , establezco una imagen de fondo, luego creo múltiples variaciones para resolución @ 2x, tamaños de pantalla más pequeños, etc.

Luego, puede usar la .text-hideclase para obtener texto en la página a la antigua usanza. Uso simple y efectivo aunque no apropiado de una imagen.

Aquí hay un enlace a la clase auxiliar para el reemplazo de texto:

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

La mejor y más fácil respuesta para esta pregunta es establecer un ancho y alto máximos dependiendo de su logotipo, la imagen tendrá un máximo de 50 píxeles de alto pero no más de 200 píxeles.

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

Esto variará según el tamaño de su logotipo y los elementos de la barra de navegación que tenga.

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

Comprenda el código a su propio esfuerzo: D Este es mi código borrador y ya está funcionando :) Aquí está la captura de pantalla.

En lugar de reemplazar la marca de texto, me dividí en dos filas como en el código a continuación y le di img-responsiveclase a la imagen ......

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

y además, agregué los siguientes códigos css .......

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

Si mi código resuelve su problema, es un placer .....

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

// No olvides agregar bootstrap en la cabeza de tu código.