twitter bootstrap - poner - Barra de navegación de respuesta completa Bootstrap con logotipo o texto de marca
logo image bootstrap (6)
El mejor enfoque para agregar un logotipo de marca dentro de una navbar-inner clase navbar-inner y un contenedor. Acerca del problema <h3> tiene un cierto margen de seguridad que se le asigna en el arranque como dijeron @creimers. Y si está utilizando una imagen más grande, aumente también la altura de la barra de navegación o el logotipo flotará en el exterior.
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="navbar-inner"> <!--changes made here-->
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1">
<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="#">
<img src="http://placehold.it/150x50&text=Logo" alt="">
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</div>
</nav>
Me gustaría hacer una barra de navegación de respuesta completa con una altura específica en Twitter Bootstrap 3.1.1, donde la marca podría consistir en imagen (logotipo) o texto.
html:
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1">
<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="#">
<img src="http://placehold.it/150x50&text=Logo" alt="">
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
css:
body {
margin-top: 125px;
}
.navbar-fixed-top .nav {
padding: 15px 0;
}
El problema es que después de que el tamaño de la ventana del navegador disminuye y el menú se contrae, la barra de navegación vuelve a su altura original y la imagen del logotipo es la siguiente:
El otro problema es que cambiar <img src="http://placehold.it/150x50&text=Logo" alt=""> en <h3>AppName</h3> hace que AppName no esté en el medio:
Actualmente se centra al establecer valores de relleno, pero no sé cómo hacerlo independiente de él.
¿Alguien podría ayudarme a resolver este problema?
Saludos
EDITAR:
Aquí hay imágenes preparadas del efecto que quiero lograr:
no colapsado barra de navegación con la imagen del logotipo:
barra de navegación colapsado (la misma altura de la barra de navegación, el mismo tamaño de imagen, pero ancho diferente barra de navegación):
no colapsó la barra de navegación con el texto de la marca:
barra de navegación colapsado (todo es igual excepto el ancho de la barra de navegación causado por el cambio del ancho de la ventana del navegador):
Establecí .navbar-brand { min-height: inherit } que resolvió el problema para mí (gracias @creimers por inspiración).
La imagen del marcador de posición que está incluyendo tiene una altura de 50px . Está envuelto en un anchor (.navbar-brand) con un padding-top de 15px y una altura de 50px . Es por eso que el logotipo del marcador de posición fluye fuera de la barra. Intente incluir una imagen más pequeña o juegue con el relleno del ancla y asígnele una class o una id a la que pueda hacer referencia en su css .
EDITAR O eliminar la height: 50px estática height: 50px de .navbar-brand . Su barra de navegación tomará la altura de su hijo más alto.
h3 en bootstrap de forma predeterminada tiene un padding-top de 20 20px . Una vez más, está envuelto con ese padding-top: 15px ancla de padding-top: 15px . Es por eso que no está centrado verticalmente como lo quieres. Podría darle al h3 una class o id que restablezca el margen superior. Y lo mismo que podrías hacer con el padding del anchor .
Aquí hay algo con lo que jugar: http://jsbin.com/jelec/1/edit?html,output
Lo revisé y funcionó para mí.
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1" style="margin-top:100px;"><!--style with margin-top according to your need-->
<ul class="nav navbar-nav navbar-right">
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
Si desea lograr this (puede cambiar el tamaño de la ventana para ver cómo se verá la versión móvil), todo lo que tiene que hacer es tener 2 imágenes de logotipo (1 para escritorio y una para móvil) y mostrarlas según el entorno usando visible-xs clases visible-xs y hidden-xs .
Entonces usé algo como esto:
<img class="hidden-xs" src="http://placehold.it/150x50&text=Logo" alt="">
<img class="visible-xs" src="http://placehold.it/120x40&text=Logo" alt="">
Y, por supuesto, diseñé el logotipo de mi dispositivo móvil usando:
@media (max-width: 767px) {
.navbar-brand {
padding: 0;
}
.navbar-brand img {
margin-top: 5px;
margin-left: 5px;
}
}
Puedes ver todo el código here . En caso de que necesite un texto en la versión móvil inscribed en el logotipo, no es un gran problema. Simplemente reemplace el logotipo con una <h1 class="visible-xs">AppName</h3> y cambie el estilo dentro de la consulta de medios de la siguiente manera:
@media (max-width: 767px) {
.navbar-brand {
padding: 0;
}
.navbar-brand h1{
//here add your style depending of the position you want the text to be placed
}
}
EDITAR:
Necesitas estas condiciones para que funcione:
.navbar-toggle {
margin: 23px 0;
}
.navbar-nav, .navbar-nav li, .navbar-nav li a {
height: 80px;
line-height: 80px;
}
.navbar-nav li a {
padding-top: 0;
padding-bottom:0;
}
Simplemente configure la altura y el ancho donde está agregando ese logotipo. Lo intenté y está funcionando bien