Twitter Bootstrap: barra de navegación superior que bloquea el contenido superior de la página

Tengo este código de Twitter Bootstrap

 

Pero cuando veo el comienzo de la página, la barra de navegación bloquea parte del contenido que está cerca de la parte superior de la página. ¿Alguna idea de cómo hacer que empuje hacia abajo el rest del contenido cuando se ve la parte superior de la página para que el contenido no esté bloqueado por la barra de navegación?

Agregar a tu CSS:

 body { padding-top: 65px; } 

De los documentos de Bootstrap :

La barra de navegación fija se superpondrá a su otro contenido, a menos que agregue relleno a la parte superior del cuerpo.

Agregar un relleno como ese no es suficiente si está utilizando el arranque de arranque sensible. En este caso, cuando cambie el tamaño de su ventana obtendrá un espacio entre la parte superior de la página y la barra de navegación. Una solución adecuada se ve así:

 body { padding-top: 60px; } @media (max-width: 979px) { body { padding-top: 0px; } } 

Para bootstrap 3, la clase navbar-static-top lugar de navbar-fixed-top evita este problema, a menos que necesites que la barra de navegación esté siempre visible.

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

cambie su primer ‘div’ de

  

a

  

Estoy usando jQuery para resolver este problema. Este es el fragmento para BS 3.0.0:

 $(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); }); 

He tenido mucho éxito al crear una barra de navegación ficticia no fija justo antes de mi barra de navegación fija real.

    

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

En mi proyecto derivado del tutorial de MVC 5 , descubrí que cambiar el relleno del cuerpo no tenía ningún efecto. Lo siguiente funcionó para mí:

 @media screen and (min-width:768px) and (max-width:991px) { body { margin-top:100px; } } @media screen and (min-width:992px) and (max-width:1199px) { body { margin-top:50px; } } 

Resuelve los casos donde la barra de navegación se pliega en 2 o 3 líneas. Esto se puede insertar en bootstrap.css en cualquier lugar después de las líneas body {margin: 0; }

Como se ve en este ejemplo de Twitter, agregue esto antes de la línea que incluye las declaraciones de estilos de respuesta:

  

Al igual que:

    

La plantilla inicial de bootstrap v4 css usa:

 body { padding-top: 5rem; } 

con navbar navbar-default todo funciona bien, pero si usa navbar-fixed-top , debe incluir cuerpo de estilo personalizado {padding-top: 60px;} de lo contrario, bloqueará el contenido debajo.

Usar MVC 5, la forma en que arreglé la mía, era simplemente agregar mi propio Site.css, cargado después de los demás, con la siguiente línea: body{padding: 0}

y cambié el código al principio de _Layout.cshtml, para ser:

   

usar percentage es una solución mucho mejor que los pixels .

 body { padding-top: 10%; //This works regardless of display size. } 

Si es necesario, puede seguir siendo explícito al agregar diferentes breakpoints como se menciona en otra respuesta de @spajus

deberías agregar

  #page { padding-top: 65px } 

no destruir un pie de página adhesivo u otra cosa

  

Si su barra de navegación está originalmente en la parte superior de la página, establezca el valor en 0. De lo contrario, establezca el valor de data-offset-top en el valor del contenido sobre su barra de navegación.

Mientras tanto, necesitas modificar el css como tal:

 .affix{ width:100%; top:0; z-index: 10; } 

Dos problemas sucederán aquí:

  1. Carga de la página (contenido oculto)
  2. Los enlaces internos como este se desplazarán hacia la parte superior, y estarán ocultos por la barra de navegación:
   hello  

World

Bootstrap 4 con enlaces de página internos

Para arreglar 1), como dijo Martijn Burger arriba, la plantilla de arranque bootstrap v4 css usa:

 body { padding-top: 5rem; } 

Para arreglar 2) mira este problema . Este código funciona principalmente (pero no en el segundo clic del mismo hash):

 window.addEventListener("hashchange", function() { scrollBy(0, -70) }) 

Este código anima enlaces A con jQuery (jQuery no delgado):

  // inline theme global code here $(document).ready(function() { var body = $('html,body'), NAVBAR_HEIGHT = 70; function smoothScrollingTo(target) { if($(target)) body.animate({scrollTop:$(target).offset().top - NAVBAR_HEIGHT}, 500); } $('a[href*=\\#]').on('click', function(event){ event.preventDefault(); smoothScrollingTo(this.hash); }); $(document).ready(function(){ smoothScrollingTo(location.hash); }); }) 

Agregue a su JS:

 jQuery(document).ready(function($) { $("body").css({ 'padding-top': $(".navbar").outerHeight() + 'px' }) }); 

puede establecer un margen basado en la resolución de pantalla

 @media screen and (min-width:768px) and (max-width:991px) { body { margin-top:100px; } @media screen and (min-width:992px) and (max-width:1199px) { body { margin-top:50px; } } body{ padding-top: 10%; } #nav{ position: fixed; background-color: #8b0000; width: 100%; top:0; }