top nav bar blocking top content of the page
CssTwitter BootstrapCss Problem Overview
I have this Twitter Bootstrap code
<div class='navbar navbar-fixed-top'>
<div class='navbar-inner'>
<div class='container'>
<a class='btn btn-navbar' data-target='.nav-collapse' data-toggle='collapse'>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
<span class='icon-bar'></span>
</a>
<div class='nav-collapse'>
<ul class='nav'>
<li class='active'>
<a href='some_url'>My Home</a>
</li>
<li>
<a href='some_url'>Option 1 </a>
</li>
<li>
<a href='some_url'>Another option</a>
</li>
<li>
<a href='some_url'>Another option</a>
</li>
</ul>
</div>
</div>
</div>
</div>
But when I am viewing the beginning of the page, the nav bar is blocking some of the content that is near the top of the page. Any idea for how to make it push down the rest of the content lower when the top of the page is viewed so that the content isn't blocked by the nav bar?
Css Solutions
Solution 1 - Css
Adding a padding like that is not enough if you're using responsive bootstrap. In this case when you resize your window you'll get a gap between top of the page and navbar. A proper solution looks like this:
body {
padding-top: 60px;
}
@media (max-width: 979px) {
body {
padding-top: 0px;
}
}
Solution 2 - Css
Add to your CSS:
body {
padding-top: 65px;
}
From the Bootstrap docs:
> The fixed navbar will overlay your other content, unless you add padding to the top of the body.
Solution 3 - Css
For bootstrap 3, the class navbar-static-top instead of navbar-fixed-top prevents this issue, unless you need the navbar to always be visible.
Solution 4 - Css
a much more handy solution for your reference, it works perfect in all of my projects:
change your first 'div' from
<div class='navbar navbar-fixed-top'>
to
<div class="navbar navbar-default navbar-static-top">
Solution 5 - Css
I am using jQuery to solve this problem. This is the snippet for BS 3.0.0:
$(window).resize(function () {
$('body').css('padding-top', parseInt($('#main-navbar').css("height"))+10);
});
$(window).load(function () {
$('body').css('padding-top', parseInt($('#main-navbar').css("height"))+10);
});
Solution 6 - Css
In my project derived from the MVC 5 tutorial I found that changing the body padding had no effect. The following worked for me:
@media screen and (min-width:768px) and (max-width:991px) {
body {
margin-top:100px;
}
}
@media screen and (min-width:992px) and (max-width:1199px) {
body {
margin-top:50px;
}
}
It resolves the cases where the navbar folds into 2 or 3 lines. This can be inserted into bootstrap.css anywhere after the lines body { margin: 0; }
Solution 7 - Css
I've had good success with creating a dummy non-fixed nav bar right before my real fixed nav bar.
<nav class="navbar navbar-default"></nav> <!-- Dummy nav bar -->
<nav class="navbar navbar-default navbar-fixed-top"> <!-- Real nav bar -->
<!-- Nav bar details -->
</nav>
The spacing works out great on all screen sizes.
Solution 8 - Css
The bootstrap v4 starter template css uses:
body {
padding-top: 5rem;
}
Solution 9 - Css
As seen on this example from Twitter, add this before the line that includes the responsive styles declarations:
<style>
body {
padding-top: 60px;
}
</style>
Like so:
<link href="Z/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<style type="text/css">
body {
padding-top: 60px;
}
</style>
<link href="Z/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />
Solution 10 - Css
using percentage is much better solution than pixels.
body {
padding-top: 10%; //This works regardless of display size.
}
If needed you can still be explicit by adding different breakpoints as mentioned in another answer by @spajus
Solution 11 - Css
EDIT: This solution is not viable for newer versions of Bootstrap, where the navbar-inverse and navbar-static-top classes are not available.
Using MVC 5, the way I fixed mine, was to simply add my own Site.css, loaded after the others, with the following line:
body{padding: 0}
and I changed the code in the beginning of _Layout.cshtml, to be:
<body>
<div class="navbar navbar-inverse navbar-static-top">
<div class="container">
@if (User.Identity.IsAuthenticated) {
<div class="top-navbar">
Solution 12 - Css
with navbar navbar-default everything works fine, but if you are using navbar-fixed-top you have to include custom style body { padding-top: 60px;} otherwise it will block content underneath.
Solution 13 - Css
Two problems will happen here:
- Page load (content hidden)
- Internal links like this will scroll to the top, and be hidden by the navbar:
>
> hello >>
World
Bootstrap 4 w/ internal page links
To fix 1), as Martijn Burger said above, the bootstrap v4 starter template css uses:
body {
padding-top: 5rem;
}
To fix 2) check out this issue. This code mostly works (but not on 2nd click of same hash):
window.addEventListener("hashchange", function() { scrollBy(0, -70) })
This code animates A links with jQuery (not slim jQuery):
// inline theme global code here
$(document).ready(function() {
var body = $('html,body'), NAVBAR_HEIGHT = 70;
function smoothScrollingTo(target) {
if($(target)) body.animate({scrollTop:$(target).offset().top - NAVBAR_HEIGHT}, 500);
}
$('a[href*=\\#]').on('click', function(event){
event.preventDefault();
smoothScrollingTo(this.hash);
});
$(document).ready(function(){
smoothScrollingTo(location.hash);
});
})
Solution 14 - Css
The best solution I've found so far, that does not involve hard coding heights and breakpoints is to add an extra <nav... tag to the markup.
<nav class="navbar navbar-expand-md" aria-hidden="true">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">Navbar</a>
By doing it this way the @media breakpoints are identical, the height is identical (provided your navbar-brand is the tallest object in the navbar but you can easily substitute another element in the non fixed-top navbar.
Where this fails is with screen readers which will now present 2 navbar-brand elements. This points at the need for a not-for-sr class to prevent that element from showing up for screen readers. However that class does not exist https://getbootstrap.com/docs/4.0/utilities/screenreaders/
I've tried to compensate for the screen reader issue with aria-hidden="true" but https://www.accessibility-developer-guide.com/examples/sensible-aria-usage/hidden/ seems to indicate this will probably not work when the screen reader is in focus mode which is of course the only time you actually need it to work...
Solution 15 - Css
you should add
#page {
padding-top: 65px
}
to not destroy a sticky footer or something else
Solution 16 - Css
<div class='navbar' data-spy="affix" data-offset-top="0">
If your navbar is on the top of the page originally, set the value to 0. Otherwise, set the value for data-offset-topto the value of the content above your navbar.
Meanwhile, you need to modify the css as such:
.affix{
width:100%;
top:0;
z-index: 10;
}
Solution 17 - Css
Add this:
.navbar {
position: relative;
}
Solution 18 - Css
You can use .stick-top which would do the same job of fixing the navbar to the top when scrolled without having to add any css padding
<div class="container-fluid mt-3">
<nav class="navbar navbar-expand-sm bg-white navbar-light sticky-top pt-0">
<a class="navbar-brand" href="/">
<img src="/images/logo-full.png" alt="logo" width="150">
</a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/">Home</a>
</li>
</ul>
</nav>
<div class="row">
.....
</div>
</div>
Solution 19 - Css
Add to your JS:
jQuery(document).ready(function($) {
$("body").css({
'padding-top': $(".navbar").outerHeight() + 'px'
})
});
Solution 20 - Css
you can set margin based on screen resolution
@media screen and (min-width:768px) and (max-width:991px) {
body {
margin-top:100px;
}
@media screen and (min-width:992px) and (max-width:1199px) {
body {
margin-top:50px;
}
}
body{
padding-top: 10%;
}
#nav{
position: fixed;
background-color: #8b0000;
width: 100%;
top:0;
}