Menu
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:
website: http://testerix.site90.com/index.html
bootstrap 2.3.2
Let me know, how can I fix it on all resolutions.
275
Set the navbar fixed to the top, add class . navbar-fixed-top to the . navbar class.
Use the .sticky-top class to make the navbar fixed/stay at the top of the page when you scroll past it.
To create a fixed top menu, use position:fixed and top:0 . Note that the fixed menu will overlay your other content. To fix this, add a margin-top (to the content) that is equal or larger than the height of your menu.
A fixed navigation bar, also referred to as a “sticky” navigation bar, is a toolbar that stays in place while the user is scrolling the web page.
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>
Try class="navbar-static-top". It still allows navigation bar to be stay on the top but doesn't block content.
44
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
