Bootstrap - ¿Cómo añadir un logotipo a la clase navbar?
Me gustaría añadir un logotipo a la barra de navegación superior dentro de la marca navbar. Me gustaría que la escala con el tamaño de la ventana gráfica, así que estoy usando img-responsive2 clase.
Parece que tanto la imagen como el texto en el navbar-brand están envolviendo a la siguiente línea.
Esta página se puede ver en http://digitalponddesign.com/dev/
Gracias de antemano por su ayuda.
Aquí está mi código:
Html
<h2 class="navbar-brand brand-name">
<a href="index.html"><img class="img-responsive2"
src="images/DigitalPondlogo.png">DigitalPond</a>
</h2>CSS
.navbar {
margin: 10px 0;
}
.navbar-default {
background-color: #fff;
border-color: #fff;
}
.brand-name {
font-family: 'Josefin Slab', serif;
font-size: 47px;
font-weight: bold;
color: #444;
text-decoration: none;
}
.nav-container {
padding-top: 8px;
}
.navbar-custom {
font-size: 20px;
background-color: #FFF;
}
7
3
He encontrado una solución en otro hilo que funciona - utilizar la clase pull-left:
Gracias a Michael en este hilo:
https://stackoverflow.com/questions/28358483/bootstrap-how-to-add-a-logo-to-navbar-class
El uso de flotadores como pull-left/pull-right puede causar problemas no deseados, por lo que deben utilizarse con moderación.
Le sugiero que utilice una imagen o un texto. Por lo tanto, eliminar el texto y añadirlo en su imagen (con Photoshop, tal vez). A continuación, utilice una anchura y altura del 100% para la imagen. que va a hacer el truco. porque la imagen se puede cambiar el tamaño basado en el contenedor. Pero, usted tiene que cambiar manualmente el tamaño del texto. Si usted puede proporcionar el fiddle, puedo ayudarle a lograr esto.