twitter bootstrap navbar sitio fijo superior superpuesto

347

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

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

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

html twitter-bootstrap Matthew Berman
fuente

Respuestas:

527

Su respuesta es correcta en los documentos :

Se requiere relleno del cuerpo

La barra de navegación fija superpondrá su otro contenido, a menos que agregue paddinga la parte superior de la <body>. Pruebe sus propios valores o use nuestro fragmento a continuación. Consejo: de forma predeterminada, la barra de navegación tiene una altura de 50 píxeles.

body { padding-top: 70px; }

Asegúrese de incluir esto después del núcleo de Bootstrap CSS.

y en los documentos de Bootstrap 4 ...

Las barras de navegación fijas usan 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.

rfunduk
fuente
16
Pero cuando minimizas la ventana, la barra de navegación aparece después de 40 px, ¿cómo debo manejarla?
Aravindhan
55
Aparece después de 40px probablemente porque no "agrega esto después del CSS de Bootstrap principal y antes del CSS receptivo opcional".
collimarco
1
Esta respuesta es verdadera, pero solo funciona bien cuando haces que el relleno de 40px tenga un estilo receptivo, mira la respuesta de Dan o Nick.
Tony Bathgate
1
Vea la respuesta de @ qub1n si no desea agregar relleno (o cualquier otra cosa).
scharfmn
2
@JerSchneid El ejemplo de navbar-fixed-top en w3schools.com muestra el mismo comportamiento. Me inclino a llamarlo un error.
Tony Martin
125

Como otros han dicho, agregar un acolchado al cuerpo funciona muy bien. Pero cuando hace que la pantalla sea más estrecha (al ancho del teléfono celular), hay una brecha entre la barra de navegación y el cuerpo. Además, una barra de navegación abarrotada puede ajustarse a una barra de varias líneas, 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 está por debajo de 768px de ancho (que según los documentos de bootstrap es el límite de diseño del teléfono celular donde se crearía la brecha)

Nick Bisby
fuente
1
¿Esta solución también va entre el núcleo de Bootstrap CSS y las importaciones sensibles de CSS? Todavía veo la brecha cuando el ancho de la ventana es inferior a 980. Supongo que la importación posterior de las modificaciones de CSS receptivas. Si muevo esta solución bajo la importación de CSS sensible, entonces todavía obtengo el relleno del cuerpo, más una línea adicional en la barra de menú.
Slothbear
Estoy usando Twitter Bootstrap 2.3.2. Noté que el documento ya no contiene la sugerencia de 40px, aunque todavía existe la necesidad.
Slothbear
1
Eh, la sugerencia de 40px sigue ahí, simplemente se movió. Perdón por el comentario spam.
oso perezoso
3
por Bootstrap 3. + body { padding-top: 40px; }es suficiente
andilabs
8
Esta solución está en el camino correcto. Simplemente poner relleno en el cuerpo, como se documenta, no es suficiente, incluso en 3. +. Con la combinación correcta de consultas de medios, se puede lograr el efecto deseado a medida que la barra de navegación se ajusta con el cambio de tamaño del navegador. En mi caso, necesito cambiar el relleno a 1148 px, 900 px y 768 px de ancho.
John McCann
34

Una solución mucho más útil para su referencia, funciona perfectamente en todos mis proyectos:

cambia tu primera línea de

.navbar.navbar-fixed-top

a

.navbar.navbar-default.navbar-static-top
catsky
fuente
1
¿solo estás trolleando? o he supervisado algo?
chyno
¿Cómo obtuvo esto 10 votos a favor? navbar-default solo agrega color y color de fondo ...
Denny Mueller
2
navbar-static-top es el cambio y funcionó para mí. ¡Gracias!
kevthanewversi
1
navbar-static-top me lo arregló también. Menos intrusivo.
xpagesbeast
3
Esto funciona si no necesita que la barra de navegación esté siempre visible en la parte superior de la pantalla. El navbar-static-top no es fijo, se desplaza con la pantalla. Esto ejemplifica los diferentes estilos de barra de navegación: getbootstrap.com/docs/3.3/examples/navbar-static-top
Victor Ionescu
26

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

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

Esto funcionó para mí:

body { padding-top: 40px; }
davidrac
fuente
99
Pero cuando minimizas la ventana, la barra de navegación aparece después de 40 px, ¿cómo debo manejarla?
Aravindhan
1
Sí, esta solución no funciona bien en tamaños de pantalla móvil. De hecho, en el modo de pantalla panorámica en mi teléfono, básicamente hace que el sitio sea inútil.
Tony Bathgate el
¿Qué CSS responsivo opcional? Solo he usado un CSS de arranque (núcleo): estoy hablando de la versión 3.7.x HACIA ARRIBA; ¿Estaba dividido en diferentes CSS antes de la versión 3.7.x?
joedotnot
26

@Ryan, tienes razón, codificar la altura hará que funcione mal en 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);         
});
Aram Paronikyan
fuente
3
En lugar de usar parseIntlos valores CSS de altura, acabo de usar $('#main-navbar').height(), pero de lo contrario esto fue muy útil y resolvió mi problema, gracias.
tylerwal
A menos que su barra de navegación tenga una altura fija, esto es lo que necesita.
CraigP
21

Puse esto antes del contenedor de rendimiento:

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

Me gusta este enfoque porque documenta el truco necesario para que funcione, además 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;
  }
}
Dan
fuente
16

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

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

.navbar { margin-bottom:0px;} //for jumtron support, see http://stackoverflow.com/questions/23911242/gap-between-navbar-and-jumbotron

<nav class="navbar navbar-inverse navbar-static-top">
...
</nav>
Tomás Kubes
fuente
1
Sí, eso es mejor, porque el acolchado del cuerpo es dinámico para cada tamaño de pantalla, su solución no es buena.
Ronen Festinger
Pero luego hay una franja de espacio en blanco sobre la barra de navegación.
user2075599
16

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

<nav class="navbar navbar-default"></nav> <!-- Dummy nav bar -->
<nav class="navbar navbar-default navbar-fixed-top"> <!-- Real nav bar -->
    <!-- Nav bar details -->
</nav>

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

Jason Butler
fuente
Esto es lo que hacemos ... coloca el contenido del cuerpo exactamente en el lugar correcto sin ningún código js, ​​adivinanzas ni nada. .
FredArters
1
Thid merece más votos, funciona perfectamente bien, es feo como el infierno, pero solo el código: D
JRsz
Gracias, esta es una solución mucho más elegante que el relleno superior o los píxeles de margen y esas cosas ...
Pedro Reis
3
Desafortunadamente, esto no funciona para dispositivos móviles, cuando los navegadores entran en 1 columna.
Pedro Reis
16

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

cambia tu primera línea de

navbar-fixed-top

a

sticky-top

Referencia de documentación de Bootstrap

Ya era hora de que hicieran esto bien: D

Almiar
fuente
Algunas personas pueden usar la parte superior fija para ver los enlaces a medida que se desplaza hacia abajo en la página; aunque esta característica podría ser útil si no te importa eso :)
knowledge_is_power
También tenga en cuenta que .sticky-top usa position: sticky, que no es totalmente compatible con todos los navegadores.
live-love
14

Todas las soluciones anteriores codifican 40 píxeles específicamente en html o CSS de una forma 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'});
});

Puede 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 sobre esto: por favor comparta sus pensamientos. (Se refactorizará para que no se repita, por cierto). Además de usar jQuery, ¿hay alguna otra razón 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'});

PD: lo 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 completa de jquery 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'
        });
});
Ryan
fuente
Solo digo que estoy usando esto y funciona muy bien, pero por alguna extraña razón si tengo dos barras de navegación, una de tamaño normal y otra para pantallas pequeñas, ¿solo funciona en la más grande?
NaughtySquid
@LiamDawe tal vez tenga más de un '.user-top' (por ejemplo) en la página, en cuyo caso el .height () podría confundirse ...?
Ryan
14

Solo cambia fixed-topcon sticky-top. de esta manera no tendrás que calcular el relleno.
¡¡Y funciona!!

Shivam Agrawal
fuente
44
Según BS4, esta debería ser la respuesta correcta. +1
Pedro Sousa
11

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

<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 acolchado superior del cuerpo se ajusta automáticamente.

Oliver Konig
fuente
Tuve que cambiar la segunda referencia a la altura en su ejemplo para que sea $ ('# topnavbar'). Height () y luego esto funcionó perfectamente para mí. ¡Gracias!
despiadado
1
¡Gracias por el comentario! Lo arreglé en la respuesta.
Oliver Konig
Esta es la mejor solución que he encontrado que funciona en PC, iOS, Android, todos los dispositivos. Todos los demás son valores de píxel codificados o demasiado largos y no funcionan en todos los dispositivos.
Oracular Man
Buena solución Estaba teniendo algunas pequeñas compensaciones que no se tenían en cuenta en el cálculo. Supongo que fue porque mi barra de navegación tenía algunos márgenes. Elegí cambiar la llamada height () para una llamada externalHeight () en lugar de tener esto en cuenta.
Leonardo Santos
4

para Bootstrap 3. +, usaría el siguiente CSS para arreglar navbar-fixed-top y el problema de superposición de salto de anclaje 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; 
}
gasolina
fuente
Mismo problema, buena respuesta.
McGrady
2

usa esta clase dentro de la etiqueta de navegación

class = "navbar navbar-expand-lg navbar-light bg-light sticky-top "

Para bootstrap 4

Kynginthenorth
fuente
Nunca sabré por qué fue rechazado, ya que estaba funcionando para mí y para todos los demás.
Kynginthenorth
Esto es correcto. El único problema es que, en los documentos, dice "La utilidad .sticky-top utiliza la posición de CSS: pegajosa, que no es totalmente compatible con todos los navegadores"
José
1

Todo lo que tienes que hacer es 

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

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

Reemplacé el requerimiento en "bootstrap_and_overrides.css" para:

= requiere twitter-bootstrap-static / bootstrap.css.erb

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

... necesita poner el cuerpo CSS antes de la declaración require 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 instrucción require está antes del CSS del cuerpo, no tendrá efecto.

danielmbarlow
fuente
0

Yo haría esto:

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

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

desarrollador10
fuente
-4

Acabo de envolver la barra de navegación en un 

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

No es lujoso hocus pocus pero funcionó ...

TTbooster
fuente
Su respuesta no está clara y no aborda el problema. ¿Qué nav-? ??representa?
fragilewindows