Bootstrap 3 Navbar con logotipo

Quiero utilizar 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 hacerlo sin causar problemas con diferentes tamaños de pantalla? Supongo que es un requisito común, pero aún no he visto una buena muestra de código. Un requisito clave aparte de tener una visualización aceptable en todos los tamaños de pantalla es la capacidad de colapso 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 navbar, pero eso hizo que el menú no funcionara correctamente en mi teléfono Android. También traté de boost 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.

Bien, primero, necesitas una imagen que se ajuste a tu barra de navegación. Puede ajustar su imagen mediante el atributo de altura css (lo que permite ampliar el ancho) o puede usar una imagen de tamaño adecuado. Lo que sea que decida hacer, la forma en que esto se vea dependerá de qué tan bien clasifique su imagen.

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

  

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

  

Bootstrap 3 Navegador logotipo de redimensionamiento

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 de navegador con MUCHOS DEMOSTRACIONES EN ESTA PÁGINA . Básicamente, el error mozilla incluye el relleno izquierdo y derecho en el enlace de la marca navbar como parte del ancho de la imagen. Sin embargo, esto se puede arreglar fácilmente y lo he probado y estoy bastante seguro de que es el ejemplo de trabajo más estable en esta página. Cambiará el tamaño automáticamente y funciona en todos los navegadores.

Solo agréguele esto a su CSS y use la marca de la barra de navegación de la misma forma que lo haría .img-responsive . Su 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 como referencia)

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

  .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 relleno policial , pero puede ser excesivo si no planeas usarlo para nada más. Parece que object-fit se está planificando para una versión futura de IE, por lo que una vez que eso suceda, funcionará en todos los navegadores.

Sin embargo, si observas la clase .img-responsive en bootstrap, el ancho máximo está asumiendo que estás poniendo estas imágenes en columnas o algo que tiene un conjunto explícito. Esto significa 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 la matriz (marca .navbar) tiene una altura fija de 50 px, pero el ancho no está establecido.

Si tomamos esa lógica y la invertimos para que sea receptiva en función de la altura, podemos tener una imagen receptiva que se adapte a la altura de la marca .navbar y al agregar y ajustar el ancho automáticamente se ajustará a la proporción.

 max-height: 100%; width: auto; 

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


Puede encontrarse con la rara situación en la que su logotipo es demasiado pequeño. El enfoque img-responsive no tiene esto en cuenta, pero lo haremos. Al agregar también el atributo “altura” a la .navbar-brand > img , puede estar seguro de que se .navbar-brand > img disminuirá.

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

Entonces, para completar esto, los puse juntos y parece funcionar perfectamente en todos los navegadores.

   

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

Aunque su pregunta es interesante, no espero que haya una respuesta para ella. 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 actúa de manera receptiva, etc. Agregar el logotipo en la a (con la marca navbar) parece ser un buen punto de partida. Debería usar la clase de la marca navbar 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 300×150 píxeles.

Pantalla completa> 1200:

enter image description here

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

enter image description here

<768 (menú contraído)

enter image description here

Además de los aspectos estéticos, no encontré ningún problema técnico. En pantallas pequeñas, un logotipo grande se superpondrá o saldrá de 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, consulte, 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 30px por lo que el contenido de su barra de navegación nunca debe superponerse al 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 css y de medios para adaptar la barra de navegación a su necesidad en diferentes tamaños de pantalla. Por favor, trate de limitar su pregunta. describe el problema que encontraste en Android.

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

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

intercambie el botón y el logotipo en su código, primero el logotipo (coloque el flotador: a la izquierda en el logotipo)

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

establecer el margin-top para .navbar-collapse ul . Use la altura del logotipo menos la altura de la barra de navegación, para alinearla con la parte inferior o (altura del logotipo – altura de la barra de navegación) / 2 hacia el centro

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

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

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

  2. Goto bootstrap / personalizar . Configure en lugar de la altura de la barra de navegación 50px> 120px (50 + 70) y navbar-collapse-max-height desde 340px hasta 410px (340 + 70). Descargar css.

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

      ... 

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

    .

  4. Agregar CSS

    .myLogo {relleno: 10px; }

  5. Adecuado para otros tamaños.

Ejemplo

Bueno, finalmente conseguí que funcionara este mismo problema, esta es 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á usando un logotipo basado en texto, elimine “navbar-brand” por completo, ya que considero que esta clase en particular es la causa principal de que mi menú de navegación contraído se duplique.

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

Debes crear un contenedor personalizado de imagen receptiva, llamé al mío “logo”

Aquí está la marca HTML de arranque:

  

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 tu logo, el mío es 368px. Los porcentajes pueden necesitar ser cambiados también dependiendo del tamaño de su logo. La primera consulta de @media debería ser tu umbral y la mía 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 syntax de la afeitadora de las porciones de 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 formas de hacerlo, personalmente compilo el Bootstrap LESS con la altura apropiada de la barra de navegación, para mis propósitos uso 70px, y la altura de mi imagen es de 68 px. La segunda forma de hacerlo es en el archivo bootstrap.css, busca “.navbar” y cambia la altura mínima: a la altura de tu logotipo.

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

  

y el CSS:

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

Mi solución es agregar css “display: inline-block” a img tag.

  

DEMO: jsfiddle

Debes usar un código como este:

  

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

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

La altura predeterminada en la barra de navegación es 20px, por lo que si especifica height: 20px en su logotipo, se alineará muy bien.

Sin embargo, eso es algo pequeño para un logotipo, así que opté por esto:

  

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

Alternativamente, podría cambiar el relleno en el elemento , por ejemplo:

  

Solución rápida : cree una clase para su logo y configure la height en 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, grandes escritorios, pero solo mostrar UNO utilizando las clases de utilidad receptivas de bootstrap, de la siguiente manera:

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

Nota: puede reemplazar la línea comentada con el código provisto. Reemplace el código php si no está usando wordpress.

Editar Nota2: Sí, esto agrega solicitudes a su servidor al cargar la página, lo que puede ralentizar un poco, pero si utiliza una técnica de sprite css en segundo plano, es probable que el logotipo no se imprima al imprimir una página y el código anterior aparezca mejor SEO.

También lo implemento a través de la propiedad de fondo css. Funciona saludable 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 clase .text-hide .navbar-brand de .navbar-brand junto con .navbar-brand para 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:

 Navbar Brand 

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-brand ya que la altura ya está configurada.

Aquí hay una demostración en vivo

Yo tuve el mismo problema. Lo solucioné así:

    

No hay una clase de marca Navbar. El resultado parece una imagen del logotipo que se adapta 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 por debajo del logo.

  

Tal vez esto sea demasiado simple, pero acabo de copiar la línea de la marca navbar para que haya dos, la imagen y luego el texto.

   My Brand 

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

Si usa MENOS, 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 de la ruta correcta:

   

mi código de trabajo – bootstrap 3.0.3. cuando navbar-toggle, hidden-xs original logo image.

    brand logo  

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

Agregue una clase de logotipo primero, 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 320px (iPhone). Puedes jugar con esto hasta que encuentres la mejor opción. Una forma fácil de probar: use Chrome o Firefox con el elemento de inspección. Reduzca su navegador lo más lejos posible. Observe el cambio del tamaño del logotipo según el ancho máximo de @media que especifique. Prueba 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 seguir el siguiente código:

     

No hacer funcionar ninguna de las otras respuestas 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):

   

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 syntax de Razor para una etiqueta . Donde dice @Html.ActionLink(...) simplemente reemplácelo con una etiqueta apropiada. Igualmente donde dice https://stackoverflow.com/questions/18474564/bootstrap-3-navbar-with-logo/@Url.Action(...) reemplácelo con una URL apropiada (no etiqueta en ese caso).

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

Luego, puede usar la clase .text-hide para obtener algo de texto en la página al estilo de la moda. Uso simple y efectivo aunque no apropiado de una imagen.

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

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

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

    

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

  

Por favor, comprenda el código a su propio esfuerzo: D Este es mi código de borrador y ya está funcionando 🙂 Aquí está la captura de pantalla.

enter image description here

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

   

y además, agregué los siguientes 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; } 

Si mi código resuelve tu problema, es un placer …

No debería necesitar agregar CSS adicional, ya que Bootstrap3 sí lo proporciona. A menos que quiera agregarlo. Este es mi código para colocar 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:

  
   

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