Bootstrap - navbar-fixed-top covers content
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" title.
I have no idea how can I fix it, because when I resize website (mobile devices size) the header is visible.
Of course I have this kind of problem with headers in other pages (Full Width and 404).
Also, in Index page, it covers some of carousel slider.
Information:
bootstrap 2.3.2
Let me know, how can I fix it on all resolutions.
Answer
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>