Menu
I am using bootstrap on my site and am having issues with the navbar fixed top. When I am just using the regular navbar, everything is fine. However, when i try to switch it to navbar fixed top, all the other content on the site shifts up like the navbar isn't there and the navbar overlaps it. here's basically how i laid it out:
.navbar.navbar-fixed-top .navbar-inner .container .container .row //yield content i tried to copy bootstraps examples exactly but still having this issue only when using navbar fixed top. what am I doing wrong?
748
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.
Add a padding of the size of your navbar's height to the body. Show activity on this post. Since 2017 add position: sticky; top:0; to navbar and it will fix this problem.
Use the . sticky-top class to make the navbar fixed/stay at the top of the page when you scroll past it.
Your answer is right in the docs:
Body padding required
The fixed navbar will overlay your other content, unless you add
paddingto the top of the<body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.body { padding-top: 70px; }Make sure to include this after the core Bootstrap CSS.
and in the Bootstrap 4 docs...
Fixed navbars use position: fixed, meaning they’re pulled from the normal flow of the DOM and may require custom CSS (e.g., padding-top on the ) to prevent overlap with other elements.
59
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
