I have a question about navbar-fixed-top. Well, I have a simple problem with it. My fixed navbar covers content, for example in \"About us\" page, it covers row with \"About us\
I would do this:
// add appropriate media query if required to target mobile nav only
.nav { overflow-y: hidden !important }
This should make sure the nav block doesn't stretch downpage and covers the page content.
Try class="navbar-static-top". It still allows navigation bar to be stay on the top but doesn't block content.
position: sticky
instead of position: static
did the trick for me.
Just add an id or class to the content, and then give it a margin top enough to make the content show without the static navbar hindering it and add the "!important" attribute to make it work.....
the response is in the page:
Twitter Bootstrap - top nav bar blocking top content of the page
Add to your CSS:
body {
padding-top: 65px;
}
or a more complex solution but responsive, if your navbar change the height( ex in tablets appears in more to 60px; or is different ) use a mixed solution with css and javascript
CSS:
#godown{
height: 60px;
}
HTML (resumen)
<body>
<nav class="navbar navbar-fixed-top " role="navigation" id="navMenu">
...
</nav>
<!-- This div make the magic :) -->
<div class="godown-60" id="godown"></div>
<!-- the rest of your site -->
...
JAVASCRIPT:
<script>
//insert this in your jquery
//control the resizing of menu and go down the content in the correct position
$("#navMenu").resize(function () {
$('#godown').height($("#navMenu").height() + 10);
});
if ($("#navMenu").height() > $('#godown').height()) $('#godown').height($("#navMenu").height() + 10);
</script>
It's possible setting a variable for the paddingTop of the body to the height of the navbar could also work and is subsequently a bit more responsive than a fixed 60/65px value.
let padding = $("nav").height() + "px";
A practical example is the Bootstrap .navbar-toogler button and adding a click event to it and setTimeout function which allows the height to change then apply the new value as paddingTop to the body.
jQuery:
$(".navbar-toggler").click(function(){
setTimeout(function(){
let padding = $("nav").height() + "px";
$("body").css("paddingTop", padding)
}, 500)
})
vanillaJS:
document.querySelector(".navbar-toggler").onclick = function(){
setTimeout(function(){
let padding = document.querySelector("nav").offsetHeight + "px";
document.body.style.paddingTop=padding;
}, 500)
};