Tengo este código de Bootstrap de Twitter

  <div class='navbar navbar-fixed-top'>
    <div class='navbar-inner'>
      <div class='container'>
        <a class='btn btn-navbar' data-target='.nav-collapse' data-toggle='collapse'>
          <span class='icon-bar'></span>
          <span class='icon-bar'></span>
          <span class='icon-bar'></span>
        </a>
        <div class='nav-collapse'>
          <ul class='nav'>
            <li class='active'>
              <a href='some_url'>My Home</a>
            </li>
            <li>
              <a href='some_url'>Option 1 </a>
            </li>
            <li>
              <a href='some_url'>Another option</a>
            </li>
            <li>
              <a href='some_url'>Another option</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

Pero cuando estoy viendo 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 resto del contenido cuando se ve la parte superior de la página para que la barra de navegación no bloquee el contenido?

Añadir a tu CSS:

body { 
    padding-top: 65px; 
}

De los documentos de Bootstrap :

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

Agregar un relleno como ese no es suficiente si está utilizando bootstrap receptivo. 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 en navbar-static-toplugar de navbar-fixed-topevita este problema, a menos que necesite que la barra de navegación esté siempre visible.

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

cambia tu primer 'div' de

<div class='navbar navbar-fixed-top'>

a

<div class="navbar navbar-default navbar-static-top">

Estoy usando jQuery para resolver este problema. Este es el fragmento de 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 con la creación de 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.

En mi proyecto derivado del tutorial 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 en que 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 del cuerpo de las líneas {margin: 0; }

La plantilla de arranque css de bootstrap v4 utiliza:

body {
  padding-top: 5rem;
}

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

<style> 
    body {
        padding-top: 60px;
    }
</style>

Al igual que:

<link href="Z/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<style type="text/css">
    body {
        padding-top: 60px;
    }
</style>
<link href="Z/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />

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

Dos problemas sucederán aquí:

1. Carga de 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:

<nav>...</nav>              <!-- 70 pixels tall -->
<a href="#hello">hello</a>  <!-- click to scroll down -->
<hr style="margin: 100px">
<h1 id="hello">World</h1>   <!-- Help!  I'm 70 pixels hidden! -->

Bootstrap 4 con enlaces a páginas internas

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

body {
  padding-top: 5rem;
}

Para solucionar 2) revisa este problema . Este código funciona principalmente (pero no con el segundo clic del mismo hash):

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

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

  // 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);
    });
  })

La mejor solución que he encontrado hasta ahora, que no implica alturas de codificación duras y puntos de interrupción es agregar una <nav...etiqueta adicional al marcado.

<nav class="navbar navbar-expand-md" aria-hidden="true">
    <a class="navbar-brand" href="#">Navbar</a>
</nav>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
    <a class="navbar-brand" href="#">Navbar</a>

Al hacerlo de esta manera, los @mediapuntos de interrupción son idénticos, la altura es idéntica (siempre que navbar-brandsea ​​el objeto más alto en el, navbarpero puede sustituir fácilmente otro elemento en la fixed-topbarra de navegación no .

Donde esto falla es con lectores de pantalla que ahora presentarán 2 navbar-brandelementos. Esto apunta a la necesidad de una not-for-srclase para evitar que ese elemento aparezca para los lectores de pantalla. Sin embargo, esa clase no existe https://getbootstrap.com/docs/4.0/utilities/screenreaders/

Intenté compensar el problema del lector de pantalla, aria-hidden="true"pero https://www.accessibility-developer-guide.com/examples/sensible-aria-usage/hidden/ parece indicar que esto probablemente no funcionará cuando el lector de pantalla esté en modo de enfoque, que es, por supuesto, la única vez que realmente lo necesitas para funcionar ...

usar percentagees una solución mucho mejor que pixels.

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

Si es necesario, aún puede ser explícito agregando diferentes breakpointscomo se menciona en otra respuesta por@spajus

EDITAR: Esta solución no es viable para las versiones más nuevas de Bootstrap, donde las clases navbar-inversa y navbar-static-top no están disponibles.

Usando MVC 5, la forma en que arreglé la mía, fue 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 comienzo de _Layout.cshtml, para que sea:

<body>
    <div class="navbar navbar-inverse navbar-static-top">
        <div class="container">
            @if (User.Identity.IsAuthenticated) {
                <div class="top-navbar">

<div class='navbar' data-spy="affix" data-offset-top="0">

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 para data-offset-topel valor del contenido sobre su barra de navegación.

Mientras tanto, debe modificar el csscomo tal:

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

Agrega esto:

.navbar {
  position: relative;
}

deberías agregar

#page {
  padding-top: 65px
}

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

Añadir a su JS:

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

puede establecer el margen en función de 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;
}