twitter bootstrap - poner - Imagen del logo de Twitter-Bootstrap-2 en la parte superior de la barra de navegación
logo image bootstrap (5)
¿Puede alguien sugerir cómo puedo colocar una imagen de logotipo en la parte superior de la barra de navegación? Mi marcado:
<body>
<a href="index.html"> <img src="images/57x57x300.jpg"></a>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
No funciona, ya que 57x57x300.jpg se muestra debajo de la barra de navegación.
Debería eliminar la navbar-fixed-top , de lo contrario la barra de navegación permanece fija en la parte superior de la página donde desea el logotipo.
Si desea colocar el logotipo dentro de la barra de navegación:
La altura de la barra de navegación (establecida en la variable @navbarHeight LESS) es de 40px por defecto. Su logotipo debe caber dentro o tiene que hacer que navbar sea más alto primero.
Luego usa la clase de brand :
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a href="/" class="brand"><img alt="" src="/logo.gif" /></a>
</div>
</div>
</div>
Si su logotipo tiene más de 20 20px , también debe corregir las hojas de estilo.
Si haces eso en MENOS:
.navbar .brand {
@elementHeight: 32px;
padding: ((@navbarHeight - @elementHeight) / 2 - 2) 20px ((@navbarHeight - @elementHeight) / 2 + 2);
}
@elementHeight debe configurar a la altura de tu imagen.
El cálculo del relleno se toma de Twitter Bootstrap LESS - https://github.com/twitter/bootstrap/blob/v2.0.4/less/navbar.less#L51-52
Alternativamente, puede calcular los valores de relleno usted mismo y usar CSS puro.
Esto funciona para las versiones 2.0.x de Twitter Bootstrap, debería funcionar también en 2.1, pero el cálculo de relleno se modificó un poco: https://github.com/twitter/bootstrap/blob/v2.1.0/less/navbar.less#L50
Si no aumenta la altura de la barra de navegación ...
.navbar .brand {
position: fixed;
overflow: visible;
padding-left: 0;
padding-top: 0;
}
Sobrescriba la clase de marca, ya sea en bootstrap.css o en un nuevo archivo CSS, como se muestra a continuación:
.brand
{
background: url(images/logo.png) no-repeat left center;
height: 20px;
width: 100px;
}
y tu html debería verse así:
<div class="container-fluid">
<a class="brand" href="index.html"></a>
</div>
También debe agregar la clase "navbar-brand" a su imagen en a contenedor, también debe incluirla dentro del .navbar-inner , así:
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="navbar-brand" href="index.html"> <img src="images/57x57x300.jpg"></a>
</div>
</div>
</div>
utilizo este código para navbar en bootstrap 3.2.0, la imagen debe tener como máximo 50px de alto, o de lo contrario sangrará la barra de navegación bs estándar.
Tenga en cuenta que, a propósito, no uso la clase = ''navbar-brand'' ya que eso introduce relleno en la imagen
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<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="" href="/"><img src=''img/anyWidthx50.png''/></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Active Link</a></li>
<li><a href="#">More Links</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</div>