css - centered - navbar bootstrap ejemplos
Logotipo de la marca de centrado en Bootstrap 3 Navbar (5)
La forma más simple es la transformación css :
.navbar-brand {
transform: translateX(-50%);
left: 50%;
position: absolute;
}
DEMO: http://codepen.io/candid/pen/dGPZvR
De esta manera también funciona con imágenes de fondo de tamaño dinámico para el logotipo y nos permite utilizar la clase text-hide:
CSS:
.navbar-brand {
background: url(http://disputebills.com/site/uploads/2015/10/dispute.png) center / contain no-repeat;
transform: translateX(-50%);
left: 50%;
position: absolute;
width: 200px; /* no height needed ... image will resize automagically */
}
HTML:
<a class="navbar-brand text-hide" href="http://disputebills.com">Brand Text
</a>
También podemos usar flexbox. Sin embargo, con este método, tendríamos que mover navbar-brand navbar-header fuera de navbar-header . De todos modos, esta manera es genial porque ahora podemos tener imágenes y textos uno al lado del otro:
.brand-centered {
display: flex;
justify-content: center;
position: absolute;
width: 100%;
left: 0;
top: 0;
}
.navbar-brand {
display: flex;
align-items: center;
}
Demostración: http://codepen.io/candid/pen/yeLZax
Para lograr estos resultados solo en dispositivos móviles, simplemente ajuste el css anterior dentro de una consulta de medios:
@media (max-width: 768px) {
}
Estoy tratando de implementar una barra de navegación Bootstrap 3 para que el logo de la marca siempre permanezca en el medio. Este es el código:
<div class="navbar navbar-fixed-top navbar-default">
<div class="navbar-inner">
<div class="container">
<button type="button" style="float: left;" class="pull-left btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="brand" style="margin: 0; float: none;" href="#">
<img src="/Content/themes/next/images/logo.png" /></a>
<div class="nav-collapse">
<ul class="nav">
<li> <a href="#">Item 1</a></li>
<li> <a href="#">Item 1</a></li>
<li> <a href="#">Item 1</a></li>
</ul>
</div>
<ul class="nav pull-right">
<li>
<a href="#">
<div class="nextCog"></div>
</a>
</li>
</ul>
<span class="navbar-text pull-right">superpup1 </span>
</div>
</div>
</div>
Hace una bonita barra de navegación:
Sin embargo, me gustaría que el logotipo (verde) permanezca en el medio persistentemente. Estoy agregando este estilo a la etiqueta con la clase "marca":
<a class="brand" style="margin: 0; float: none; text-align:center" href="#">
<img src="/Content/themes/next/images/logo.png" /></a>
Resuelve parcialmente el problema: el logotipo está en el medio, pero empuja hacia abajo el resto de los elementos de la barra de navegación:
Este es un efecto indeseable que me gustaría eliminar. ¿Podría sugerir una solución? ¿Tal vez es un enfoque equivocado centrar un logo desde el principio?
Prueba esto:
.navbar {
position: relative;
}
.brand {
position: absolute;
left: 50%;
margin-left: -50px !important; /* 50% of your logo width */
display: block;
}
Centrar su logotipo en un 50% y menos la mitad del ancho de su logotipo para que no tenga problemas al acercarse y alejarse.
Ver fiddle
Una solución donde el logotipo está verdaderamente centrado y los enlaces están justificados.
El número máximo recomendado de enlaces para la navegación es 6, dependiendo de la longitud de las palabras en el enlace eache.
Si tiene 5 enlaces, inserte un enlace vacío y ejecútelo con:
class="hidden-xs" style="visibility: hidden;"
de esta forma, la cantidad de enlaces siempre es pareja.
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<style>
.navbar-nav > li {
float: none;
vertical-align: bottom;
}
#site-logo {
position: relative;
vertical-align: bottom;
bottom: -35px;
}
#site-logo a {
margin-top: -53px;
}
</style>
<nav class="navbar navbar-default navbar-fixed-top">
<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">Nav</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav nav-justified navbar-nav center-block">
<li class="active"><a href="#">First Link</a></li>
<li><a href="#">Second Link</a></li>
<li><a href="#">Third Link</a></li>
<li id="site-logo" class="hidden-xs"><a href="#"><img id="logo-navbar-middle" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/32877/logo-thing.png" width="200" alt="Logo Thing main logo"></a></li>
<li><a href="#">Fourth Link</a></li>
<li><a href="#">Fifth Link</a></li>
<li class="hidden-xs" style="visibility: hidden;"><a href="#">Sixth Link</a></li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
Para ver el resultado, haga clic en ejecutar fragmento y luego en página completa
Una vieja pregunta, pero solo para la posteridad.
He encontrado que la manera más fácil de hacerlo es tener la imagen como imagen de fondo de la marca de la barra de navegación. Solo se asegura de poner un ancho personalizado.
.navbar-brand
{
margin-left: auto;
margin-right: auto;
width: 150px;
background-image: url(''logo.png'');
}
Actualizado 2018
Bootstrap 3
Vea si este ejemplo ayuda: http://bootply.com/mQh8DyRfWY
La marca se centra utilizando ..
.navbar-brand
{
position: absolute;
width: 100%;
left: 0;
top: 0;
text-align: center;
margin: auto;
}
Su marcado es para Bootstrap 2, no 3. Ya no hay una navbar-inner .
EDITAR - Otro enfoque es usar transform: translateX(-50%);
.navbar-brand {
transform: translateX(-50%);
left: 50%;
position: absolute;
}
http://www.bootply.com/V7vKDfk46G
Bootstrap 4
En Bootstrap 4, mx-auto o flexbox se pueden usar para centrar la marca y otros elementos. Consulte Cómo colocar los contenidos de la barra de navegación en Bootstrap 4 para obtener una explicación.
Ver también:
Bootstrap NavBar con elementos alineados a la izquierda, centro o derecha