Estoy usando bootstrap en mi sitio y estoy teniendo problemas con la barra de navegación superior fija. Cuando sólo estoy usando la barra de navegación regular, todo está bien. Sin embargo, cuando trato de cambiar a la parte superior fija navbar, todo el resto del contenido en el sitio se desplaza hacia arriba como la barra de navegación no está allí y la barra de navegación se superpone:
.navbar.navbar-fixed-top
.navbar-inner
.container
.container
.row
//yield content
Intenté copiar exactamente los ejemplos de bootstraps pero sigo teniendo este problema sólo cuando uso la barra de navegación superior fija.
La respuesta está en los docs:
La barra de navegación fija se superpondrá al resto del contenido, a menos que añada
padding
a la parte superior del<body>
. Pruebe sus propios valores o utilice nuestro fragmento de abajo. Consejo: Por defecto, la barra de navegación tiene una altura de 50px.
body { padding-top: 70px; }
Asegúrate de incluir esto después del CSS central de Bootstrap.
y en los Documentos de Bootstrap 4...
Las barras de navegación fijas utilizan position: fixed, lo que significa que se extraen del flujo normal del DOM y pueden requerir CSS personalizado (por ejemplo, padding-top en el
) para evitar la superposición con otros elementos.
Como otros han dicho añadiendo un padding-top al body funciona muy bien. Pero cuando se hace la pantalla más estrecha (a los anchos de los teléfonos móviles) hay una brecha entre la barra de navegación y el cuerpo. Además, una navbar abarrotada puede envolver a una barra de varias líneas, sobrescribiendo parte del contenido de nuevo.
Esto me solucionó este tipo de problemas
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 el ancho es inferior a 768px (que según la documentación de bootstrap's es el corte de diseño de teléfonos móviles donde se crearía el hueco)
Este problema es conocido y hay una solución en el sitio de twitter bootstrap:
Cuando se coloca la barra de navegación, recuerde que debe tener en cuenta el área oculta debajo. Añade 40px o más de padding al
<body>
. Asegúrese de añadir después del CSS central de Bootstrap y antes del CSS opcional de respuesta. CSS opcional.
Esto funcionó para mí:
body { padding-top: 40px; }