over - Twitter bootstrap barra de navegación fija superior sitio superpuesto

navbar fixed top overlap (16)

@Ryan, tienes razón, codificar la altura hará que funcione mal en el caso de barras de navegación personalizadas. Este es el código que estoy usando para BS 3.0.0 felizmente:

$(window).resize(function () { $(''body'').css(''padding-top'', parseInt($(''#main-navbar'').css("height"))+10); }); $(window).load(function () { $(''body'').css(''padding-top'', parseInt($(''#main-navbar'').css("height"))+10); });

Estoy usando bootstrap en mi sitio y tengo problemas con la parte superior fija de la barra de navegación. Cuando estoy usando la barra de navegación normal, todo está bien. Sin embargo, cuando intento cambiarlo a la parte superior de la barra de navegación, todo el resto del contenido del sitio se desplaza como si la barra de navegación no estuviera allí y la barra de navegación se superponga. Aquí es básicamente cómo lo puse:

.navbar.navbar-fixed-top .navbar-inner .container .container .row //yield content

Traté de copiar los ejemplos de bootstraps exactamente pero aún tengo este problema solo cuando uso la barra de navegación fija arriba. ¿Qué estoy haciendo mal?

Acabo de envolver la barra de navegación en un

<div width="100%"> <div class="nav-? ??"> ... </nav> </div>

No fancy hocus pocus pero funcionó ..

Como han dicho otros, agregar un acolchado al cuerpo funciona muy bien. Pero cuando hace que la pantalla sea más estrecha (a los anchos de los teléfonos celulares), hay una brecha entre la barra de navegación y el cuerpo. Además, una barra de navegación atestada puede envolverse en una barra multilínea, sobrescribiendo parte del contenido nuevamente.

Esto resolvió este tipo de problemas para mí

body { padding-top: 40px; } @media screen and (max-width: 768px) { body { padding-top: 0px; } }

Esto hace un relleno de 40px por defecto y 0px cuando tiene menos de 768px de ancho (que de acuerdo con los documentos de bootstrap es el corte de la disposición del teléfono celular donde se crearía la brecha)

Como he publicado en una pregunta similar, he tenido un gran éxito al crear una barra de navegación no fija ficticia justo antes de mi barra de navegación fija real.

<nav class="navbar navbar-default"></nav>  <nav class="navbar navbar-default navbar-fixed-top">   </nav>

El espaciado funciona muy bien en todos los tamaños de pantalla.

El problema es con navbar-fixed-top, que superpondrá su contenido a menos que especifique el relleno del cuerpo. Ninguna solución proporcionada aquí funciona en un 100% de los casos. La solución JQuery parpadea / desplaza la página después de que se carga la página, lo que parece extraño.

La solución real para mí es no usar navbar-fixed-top, sino navbar-static-top.

.navbar { margin-bottom:0px;} //for jumtron support, see http://.com/questions/23911242/gap-between-navbar-and-jumbotron <nav class="navbar navbar-inverse navbar-static-top"> ... </nav>

En respuesta a la respuesta de Nick Bisby, si tiene este problema al usar HAML en los rieles y ha aplicado la solución de Roberto Barros aquí:

Reemplacé el requisito en "bootstrap_and_overrides.css" para:
= requiere twitter-bootstrap-static / bootstrap.css.erb

(Consulte https://github.com/seyhunak/twitter-bootstrap-rails/issues/91 )

... debe colocar el cuerpo CSS antes de la declaración de requerimiento de la siguiente manera:

@import "twitter/bootstrap/bootstrap"; body { padding-top: 40px; } @import "twitter/bootstrap/responsive"; =require twitter-bootstrap-static/bootstrap.css.erb

Si la declaración de requerimiento está antes del cuerpo CSS, no tendrá efecto.

Este problema es conocido y hay una solución en el sitio de inicio de Twitter:

Cuando coloque la barra de navegación, recuerde tener en cuenta el área oculta que se encuentra debajo. Agregue 40px o más de relleno al <body> . Asegúrese de agregar esto después del núcleo Bootstrap CSS y antes del CSS responsivo opcional.

Esto funcionó para mí:

body { padding-top: 40px; }

La solución para Bootstrap 4, funciona perfectamente en todos mis proyectos:

cambia tu primera línea de

navbar-fixed-top

sticky-top

Referencia de documentación de Bootstrap.

Ya era hora de que lo hicieran bien: D

Para manejar las líneas de ajuste en la barra de menús, aplique una identificación a la barra de navegación, como esta:

<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="topnavbar">

y agregue este pequeño script en la cabeza después de incluir el jQuery, así:

<script> $(document).ready(function(){ $(document.body).css(''padding-top'', $(''#topnavbar'').height() + 10); $(window).resize(function(){ $(document.body).css(''padding-top'', $(''#topnavbar'').height() + 10); }); }); </script>

De esa manera, el relleno superior del cuerpo se ajusta automáticamente.

Pongo esto antes del contenedor de rendimiento:

<div id="fix-for-navbar-fixed-top-spacing" style="height: 42px;"> </div>

Me gusta este enfoque porque documenta el truco necesario para que funcione, y también funciona para la navegación móvil.

EDITAR - esto funciona mucho mejor:

@media (min-width: 980px) { body { padding-top: 60px; padding-bottom: 42px; } }

Su respuesta está justo en los docs :

Acolchado corporal requerido
La barra de navegación fija superpondrá su otro contenido, a menos que agregue un padding en la parte superior del <body> . Pruebe sus propios valores o utilice nuestro fragmento de código a continuación. Sugerencia: De forma predeterminada, la barra de navegación tiene una altura de 50 px.
body { padding-top: 70px; }
Asegúrese de incluir esto después del núcleo Bootstrap CSS.

y en la documentación de Bootstrap 4 ...

Las barras de navegación fijas usan la posición: fija, lo que significa que se extraen del flujo normal del DOM y pueden requerir CSS personalizado (por ejemplo, relleno en la parte superior) para evitar la superposición con otros elementos.

Todas las soluciones anteriores codificaron 40 píxeles específicamente en el html o CSS de una manera u otra. ¿Qué sucede si la barra de navegación contiene un tamaño de fuente diferente o una imagen? ¿Qué pasa si tengo una buena razón para no meterme con el relleno del cuerpo en primer lugar? He estado buscando una solución a este problema, y esto es lo que se me ocurrió:

$(document).ready(function(){ $(''.contentwrap'') .css({''margin-top'': (($(''.navbar-fixed-top'').height()) + 1 )+''px''}); $(window).resize(function(){ $(''.contentwrap'') .css({''margin-top'': (($(''.navbar-fixed-top'').height()) + 1 )+''px''}); });

Puedes moverlo hacia arriba o hacia abajo ajustando el ''1''. Parece que funciona para mí independientemente del tamaño del contenido en la barra de navegación, antes y después de cambiar el tamaño.

Tengo curiosidad por lo que otros piensan acerca de esto: por favor comparta sus pensamientos. (Será refactorizado para que no se repita, por cierto). Además de usar jQuery, ¿existen otras razones para no abordar el problema de esta manera? Incluso lo tengo trabajando con una barra de navegación secundaria como esta:

$(''.contentwrap'') .css({''margin-top'': (($(''.navbar-fixed-top'').height()) + $(''.admin-nav'').height() + 1 )+''px''});

PS: la anterior está en Bootstrap 2.3.2: funcionará en 3.x Mientras los nombres de clase genéricos permanezcan ... de hecho, debería funcionar independientemente de bootstrap, ¿verdad?

EDITAR: Aquí hay una función jquery completa que maneja dos barras de navegación fijas apiladas y receptivas de tamaño dinámico. Requiere 3 clases html (o podría usar ID): user-top, admin-top y contentwrap:

$(document).ready(function(){ $(''.admin-top'').css({''margin-top'':($(''.user-top'').height()+0)+''px''}); $(''.contentwrap'') .css({''padding-top'': ( $(''.user-top'').height() + $(''.admin-top'').height() + 0 )+''px'' }); $(window).resize(function(){ $(''.admin-top'').css({''margin-top'':($(''.user-top'').height()+0)+''px''}); $(''.contentwrap'') .css({''padding-top'': ( $(''.user-top'').height() + $(''.admin-top'').height() + 0 )+''px'' }); });

Todo lo que tienes que hacer es

@media (min-width: 980px) { body { padding-top: 40px; } }

Yo haría esto:

// add appropriate media query if required to target mobile nav only .nav { overflow-y: hidden !important }

Esto debería asegurar que el bloque de navegación no se extienda hacia abajo y cubra el contenido de la página.

para Bootstrap 3. +, usaría el siguiente CSS para corregir el problema de superposición de la barra de navegación fija y del salto de ancla basado en https://github.com/twbs/bootstrap/issues/1768

/* fix fixed-bar */ body { padding-top: 40px; } @media screen and (max-width: 768px) { body { padding-top: 40px; } } /* fix fixed-bar jumping to in-page anchor issue */ *[id]:before { display: block; content: " "; margin-top: -75px; height: 75px; visibility: hidden; }

una solución mucho más práctica para su referencia, funciona perfectamente en todos mis proyectos:

cambia tu primera línea de

.navbar.navbar-fixed-top

.navbar.navbar-default.navbar-static-top