Solución:
Esto se maneja agregando algunos padding a la cima de la <body>.
Según la documentación de Bootstrap en .navbar-fixed-top, pruebe sus propios valores o utilice nuestro fragmento a continuación. Sugerencia: de forma predeterminada, navbar es 50px elevado.
body {
padding-top: 70px;
}
Además, eche un vistazo a la fuente de este ejemplo y abra starter-template.css.
Supongo que el problema que tienes está relacionado con la altura dinámica que el fijo barra de navegación en la parte superior tiene. Por ejemplo, cuando un usuario inicia sesión, debe mostrar algún tipo de “Hola [User Name]“y cuando el nombre es demasiado ancho, el barra de navegación necesita usar más altura para que este texto no se superponga con el barra de navegación menú. Como el barra de navegación tiene el estilo “posición: fija“, el cuerpo permanece debajo y una parte más alta se oculta, por lo que debe cambiar” dinámicamente “el acolchado en la parte superior cada vez que barra de navegación cambios de altura que ocurrirían en los siguientes casos:
- La página está cargada / recargada.
- Se cambia el tamaño de la ventana del navegador, ya que esto podría alcanzar un punto de interrupción de respuesta diferente.
- los barra de navegación El contenido se modifica directa o indirectamente ya que esto podría provocar un cambio de altura.
Esta dinámica no está cubierta por los CSS por lo que solo puedo pensar en una forma de resolver este problema si el usuario tiene JavaScript activado. Por favor intenta lo siguiente jQuery fragmento de código para resolver los escenarios de casos 1 y 2; para el escenario de caso 3, recuerde llamar a la función onResize () después de cualquier cambio en el barra de navegación contenido:
var onResize = function() {
// apply dynamic padding at the top of the body according to the fixed navbar height
$("body").css("padding-top", $(".navbar-fixed-top").height());
};
// attach the function to the window resize event
$(window).resize(onResize);
// call it also when the page is ready after load or reload
$(function() {
onResize();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>Simplemente defina una barra de navegación vacía antes de la fija, creará el espacio necesario.
<nav class="navbar navbar-default ">
</nav>
<nav class="navbar navbar-default navbar-fixed-top ">
<div class="container-fluid">
// Your menu code
</div>
</nav>