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


296

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?



2
@ user2428107 Esa pregunta se publicó más tarde.
jazzpi

Respuestas:


255

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.


11
Vea la respuesta adicional a continuación por @Spajus para saber cómo codificar esto para Bootstrap receptivo
Jason Capriotti

44
Definitivamente vaya con la otra respuesta con un poco más de precisión con @media (min-width: 980px) {body {padding-top: 60px; }}
Ted

3
Si bien las otras respuestas abordan esto de manera más elocuente, esta es la respuesta oficial como se señala en la documentación de Bootstrap para el enlace de la
Caffeinius

1
¿Cómo funcionará eso si el usuario tiene una pantalla más estrecha o simplemente cambia el tamaño de la ventana? La sección de la barra de navegación expandida bloqueará nuevamente los contenidos superiores.
Konrad Viltersten

366

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

19
Perfecto. Esto debería integrarse realmente en bootstrap de alguna manera. Debe bifurcar y enviar una solicitud de extracción.
brittohalloran

1
Buena solución, pero todavía hay algo no resuelto. Eche un vistazo a esta pregunta que acabo de hacer y vea si alguien puede echarle una mano. stackoverflow.com/questions/12763707/…
ElPiter

27
Aún más sucintamente: @media (min-width: 981px) {body {padding-top: 60px; }}
Ted

44
@Ted para mí tiene que ser min-width: 980px ;-)
white_gecko

3
@white_gecko lol. Sí. Ese 980 quería ser un poco extra especial único ;-)
Ted

143

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.


2
Sin embargo, esto puede dejar algo de espacio sobre la barra de navegación. Es posible que deba modificar site.css y eliminar padding-top 80px del cuerpo.
ZZZ

99
Lo intenté todo y esta es la única respuesta que funcionó. Debido a que esta es la solución más general y no depende del tamaño de la pantalla, esta debería ser la respuesta correcta.
Blairg23

1
Esto solucionó el problema. ¿Por qué funciona esto en lugar de navbar-fixed-top?
Hlyates

No funcionó para bootstap 3.3.4. Veo un ejemplo de navegación fija en el sitio de bootstrap getbootstrap.com/examples/navbar-fixed-top , utiliza padding-top
Alireza Fattahi

2
mientras esto funciona, hace que la barra de navegación sea estática y no fija. eso significa que cuando te desplazas hacia abajo, la barra de navegación desaparecerá ... al menos para mí eso no es bueno.
tbkn23

62

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">

28
La barra de navegación estática desaparece al desplazarse.
Daniel C. Sobral

1
Re: @ DanielC. Respuesta general: puede cambiarlo por el fijo en js si se desplaza desde la parte superior
obie

17

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

2
Estaba usando una imagen sobre la barra de navegación y tenía problemas reales con el contenido oculto. Esto funcionó perfectamente! ¡Gracias!
Richard Varno

2
Muchas gracias por su solución. esta respuesta funcionó de maravilla para mí :) Me gustaría agregar una cosa. Cuando carga la página, el cuerpo se establece en la parte superior antes de que se ajuste automáticamente porque jquery no se ejecuta instantáneamente. Para hacerlo más suave, agregué esto en el cuerpo CSS {padding-top: // altura inicial de mi barra de navegación; } Esto ayuda en la transición sin problemas! ¡Gracias de nuevo!
AAA

1
¡Gracias por inspirar una solución programática! Tengo una excelente implementación de trabajo ahora en GWT con un bonito código bien estructurado encapsulado ... gracias a la falta de Javascript ;-)
Alex Worden

9

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.


Al principio pensé que esta era la respuesta y estaba listo para dar un voto positivo. Pero luego me di cuenta de que no funciona cuando el tamaño se estrecha lo suficiente como para apilar los botones del menú. :-(
Steve en CO

Tienes razón, no funcionará con el apilamiento de menú sin código adicional. Por lo general, solo mantengo mis barras de menú en una línea de altura y convierto las opciones de menú en un botón de hamburguesa cuando el tamaño se reduce.
Jason Butler

No tengo idea de por qué, pero esto funciona. ¿Puedes explicar por qué funciona?
seguridad roja

¡Gran idea! ya que es útil cuando algunas páginas tienen una barra de navegación y otras no, ya que no es posible diferenciar el archivo CSS.
Laurent

Este es definitivamente el camino a seguir. Funciona en todos los dispositivos, incluso cuando la barra de navegación se divide en dos líneas. +1

7

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



4

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" />

2

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.


3
Esto no agrega ninguna información que no esté en otras respuestas.
Tom Zych

2

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

2

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 ...


1

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


1

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">

navbar-static-topno está definido en Bootstrap4. Tampoco lo esnavbar-inverse
boatcoder

Supongo que esta respuesta está desactualizada, entonces. Agregaré una nota a la respuesta.
Ultroman el Tacomán

0
<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;
}


0

deberías agregar

#page {
  padding-top: 65px
}

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


-1

Añadir a su JS:

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

Esto no funcionará si se cambia el tamaño de la ventana ya que su relleno superior solo se aplica cuando el documento está listo.
Boatcoder

-2

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;
}
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.