top nav bar blocking top content of the page

Question

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?

possible duplicate of [twitter bootstrap navbar fixed top overlapping site](http://stackoverflow.com/questions/11124777/twitter-bootstrap-navbar-fixed-top-overlapping-site) — user2428107, Apr 15 '14 at 06:34

score 385 · Answer 1 · edited Aug 17 '13 at 19:09

385

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;
  }
}

edited Aug 17 '13 at 19:09

KyleMit

30,350
66
462
664

answered Jun 13 '12 at 04:02

Spajus

7,356
2
25
26

24

Perfect. This should really be integrated into bootstrap somehow. You should fork and submit a pull request. – brittohalloran Jul 27 '12 at 13:57
1

Good solution, but there is still something not solved. Take a look to this question I have just made and see if anyone can give a hand on it. http://stackoverflow.com/questions/12763707/space-behind-bootstrap-navbar – ElPiter Oct 06 '12 at 20:45
28

Even more succinctly: @media (min-width: 981px) { body { padding-top: 60px; } } – Ted Oct 22 '12 at 21:54
4

@Ted for me it has to be min-width: 980px ;-) – white_gecko Nov 09 '12 at 17:07
3

@white_gecko lol. Yep. That 980 wanted to be just a little extra special unique ;-) – Ted Nov 23 '12 at 00:44
I had an issue in IE8 using Ted's solution. After altering to Spajus's solution it works better in IE8. This has to do with the @media type not working in IE8. – Jan-Terje Sørensen Feb 14 '13 at 14:38
It's always fun to add this to the minified CSS file. :) – whirlwin Apr 02 '13 at 20:04
1

Only `` is needed, assuming you place that code before including the stylesheet for responsive design. Example (see source code) http://twitter.github.io/bootstrap/examples/fluid.html - PS. As you may have guessed, that declaration inside the media query is already present in the responsive stylesheet. – Nabil Kadimi May 05 '13 at 00:30
Might be a stupid question, but where exactly do you put this? in the css file? do you replace the existing body tag? – The Dude Jun 16 '15 at 12:01
@brittohalloran If I remember rightly they are doing similar behaviour to this in the upcoming Bootstrap4 – GeorgeWL May 06 '16 at 10:27
I don't understand. Wouldn't this solution again introduce the content blocking problem in devices with screen size less than 979px? Because that's exactly what I see when I resize my browser window... – Rajshri Mohan K S Aug 21 '16 at 11:04
1

Thanks for the answer! I am wondering that this needs to be added. I was sure bootstrap will create a padding by its own with all it's containers following each other.... – Alex Cio Sep 06 '16 at 02:14

score 291 · Accepted Answer · edited Jul 13 '16 at 21:18

291

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.

edited Jul 13 '16 at 21:18

Carol Skelly

351,302
90
710
624

answered Apr 26 '12 at 15:08

Akuta

3,290
2
15
9

11

See additional answer below by @Spajus for how to code this for responsive Bootstrap – Jason Capriotti Jun 13 '12 at 14:15
4

Definitely roll with the other answer with a little more succinctness with @media (min-width: 980px) { body { padding-top: 60px; } } – Ted Nov 23 '12 at 00:46
3

While the other answers do address this more eloquently, this is the official answer as noted in the Bootstrap documentation for Fixed Navbar [link](http://getbootstrap.com/components/#navbar-fixed-top) – Caffeinius Nov 04 '14 at 20:02
1

How will that work if the user has a narrower screen or simply resizes the window? The topmost contents will be blocked again by the expanded nav bar section. – Konrad Viltersten Apr 21 '16 at 11:41

score 151 · Answer 3 · edited Nov 01 '17 at 09:31

151

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.

edited Nov 01 '17 at 09:31

j-i-l

10,281
3
53
70

answered Oct 09 '13 at 04:15

gtrak

5,598
4
32
41

2

This works however might leave some space above the navbar. You may need to modify site.css and remove padding-top 80px from body. – ZZZ Jan 07 '15 at 06:07
9

I tried everything and this is the only answer that worked. Because this is the most general solution and doesn't depend on screen size, this should be the correct answer. – Blairg23 Feb 06 '15 at 00:44
1

This fixed the problem. Why does this work instead of navbar-fixed-top? – hlyates Feb 23 '15 at 17:09
It did not worked for bootstap 3.3.4. I see fixed nav example at bootstrap site http://getbootstrap.com/examples/navbar-fixed-top/, It uses padding-top – Alireza Fattahi Apr 20 '15 at 05:03
What ZZZ said about getting rid of the white space that appears above the navbar did not work for me. Does anyone know how to get rid of the white space that appears above the navbar when switching from navbar-fixed-top to navbar-static-top ? – Apr 22 '17 at 08:43
2

while this works, it makes the navbar static and not fixed. that means that when you scroll down the navbar will disappear... at least for me that's not good. – tbkn23 Jan 06 '18 at 09:37
I want the navbar to always be visible, how can I have a fixed nav-bar without it blocking the top content? I'm using bootstrap 3 – Jill Aug 24 '18 at 10:26

score 64 · Answer 4 · answered Jan 26 '15 at 23:34

64

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">

answered Jan 26 '15 at 23:34

catsky

1,193
10
7

34

The static navbar disappears when scrolling. – Daniel C. Sobral Jul 23 '15 at 14:02
1

Re: @DanielC.Sobral response - you could switch it out for the fixed one in js if it scrolls off the top – obie Jan 07 '16 at 12:55

Aram Paronikyan · Answer 5 · 2013-10-17T06:54:32.947

17

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);        
});

edited Oct 17 '13 at 06:54

answered Oct 17 '13 at 06:35

Aram Paronikyan

1,598
17
22

2

I was using a image over the navbar and having real problems with the content being hidden. This worked perfectly! Thanks! – Richard Varno May 19 '14 at 03:44
2

thank you so much for your solution. this answer worked like a charm for me :) I'd like to add one thing. When you load the page, the body is set to the top before it adjusts itself automatically because jquery doesnt run instantly. To make it smoother, I added this in CSS body{ padding-top: //initial height of my navbar; } This helps in smooth transition! Thank you again! – A M Dec 13 '14 at 06:53
1

Thanks for inspiring a programatic solution! I have a great working implementation now in GWT with nice encapsulated well structured code... thanks to a lack of Javascript ;-) – Alex Worden Mar 13 '16 at 20:15

score 9 · Answer 6 · answered Jun 23 '14 at 12:39

9

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; }

answered Jun 23 '14 at 12:39

PiersB

151
2
3

After studying all answers, this seems like the best solution. (navbar-static-top makes it disappear when scrolling, & the dummy navbar doesn't take into account how the real navbar menu might wrap.) I found that bootstrap has four hardcoded width cases: <768 pixels, 768-991, 992-1199, and >1199. See how your menu behaves for those 4 cases. For non-admin users of my website, I only needed the 100 pixels for the 768-991 case & that was sufficient. Was put into site.css. Or, I noticed that our menu is wider for admin users and wraps more easily. So we put conditional style code in _Layout.cshtml – Kevin North Sep 03 '20 at 19:48
using margin-top instead of padding-top moves down a content beneath of navbar. It's true that padding-top applied to body doesn't work in MVC but it seems it works when applied to a body container. – Niksr Jan 14 '22 at 18:10

score 9 · Answer 7 · answered Mar 16 '16 at 01:36

9

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.

answered Mar 16 '16 at 01:36

Jason Butler

626
1
13
25

1

I thought this was the answer at first and was all set to give an upvote. But then I realized it doesn't work when the size gets narrow enough to have it stack the menu buttons. :-( – Steve In CO Nov 01 '16 at 20:50
You're right it won't work with menu stacking without additional code. I usually just keep my menu bars at one line of height and turn the menu options into a hamburger button when the size narrows. – Jason Butler Nov 04 '16 at 17:07
i have no idea why, but this works. can u elaborate on why it works ? – red security Feb 12 '17 at 08:00
Great idea! as it's useful when some pages have a navbar and some not, as it's not possible to differentiate froms css file. – Laurent Jun 17 '17 at 11:00
This is definitely the way to go. It works on all devices, even when the navbar breaks into two lines. +1 – Jan 01 '18 at 20:34
Doesn't work. the content at the top of the body still continues to be covered by the navigation bar if the bar height increases due to additional role-based items on iPad. I am trying to avoid adding
– Oracular Man May 02 '18 at 19:43

score 8 · Answer 8 · edited Nov 05 '19 at 22:51

8

The bootstrap v4 starter template css uses:

body {
  padding-top: 5rem;
}

edited Nov 05 '19 at 22:51

Yihui Xie

28,913
23
193
419

answered Oct 17 '17 at 21:26

Martijn Burger

7,315
8
54
94

Nabil Kadimi · Answer 9 · 2013-08-17T19:56:04.653

4

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" />

edited Aug 17 '13 at 19:56

answered May 05 '13 at 00:34

Nabil Kadimi

10,078
2
51
58

score 4 · Answer 10 · answered Jun 23 '16 at 17:58

4

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

answered Jun 23 '16 at 17:58

Abhilash

2,864
3
33
67

Ultroman the Tacoman · Answer 11 · 2019-07-22T22:01:37.200

2

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">

edited Jul 22 '19 at 22:01

answered Aug 22 '14 at 11:45

Ultroman the Tacoman

642
1
10
16

`navbar-static-top` is not defined in Bootstrap4. Neither is `navbar-inverse` – boatcoder Jul 16 '19 at 15:14
I guess this answer is out-dated, then. I'll add a note to the answer. – Ultroman the Tacoman Jul 22 '19 at 21:59

score 2 · Answer 12 · answered Jan 21 '17 at 21:31

2

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.

answered Jan 21 '17 at 21:31

Eldiyar Talantbek

764
7
9

3

This doesn't add any information that isn't already in other answers. – Tom Zych Jan 21 '17 at 21:56

Michael Cole · Answer 13 · 2018-02-11T23:59:44.177

Two problems will happen here:

Page load (content hidden)
Internal links like this will scroll to the top, and be hidden by the navbar:

<nav>...</nav>              <!-- 70 pixels tall -->
<a href="#hello">hello</a>  <!-- click to scroll down -->
<hr style="margin: 100px">
<h1 id="hello">World</h1>   <!-- Help!  I'm 70 pixels hidden! -->

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);
    });
  })

score 2 · Answer 14 · answered Jul 16 '19 at 15:09

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...

score 1 · Answer 15 · edited Nov 24 '19 at 10:14

1

you should add

#page {
  padding-top: 65px
}

to not destroy a sticky footer or something else

edited Nov 24 '19 at 10:14

adiga

34,372
9
61
83

answered Mar 15 '13 at 16:34

Sebastian Viereck

5,455
53
53

score 0 · Answer 16 · edited Jan 15 '16 at 22:41

0

<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;
}

edited Jan 15 '16 at 22:41

Nathaniel Ford

20,545
20
91
102

answered Jan 15 '16 at 22:29

web fan

1

score 0 · Answer 17 · answered Aug 22 '18 at 13:00

0

Add to your JS:

jQuery(document).ready(function($) {
  $("body").css({
    'padding-top': $(".navbar").outerHeight() + 'px'
  })
});

answered Aug 22 '18 at 13:00

cottonova

11

This will not work if the window is resized since your padding-top is only applied at document ready. – boatcoder Jul 16 '19 at 15:17

score 0 · Answer 18 · edited Nov 24 '19 at 10:13

0

Add this:

.navbar {
  position: relative;
}

edited Nov 24 '19 at 10:13

adiga

34,372
9
61
83

answered Nov 24 '19 at 09:29

imcoder

1
1

score 0 · Answer 19 · answered Mar 02 '22 at 19:38

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>

score -2 · Answer 20 · edited Mar 17 '18 at 07:08

-2

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;
}

edited Mar 17 '18 at 07:08

Shailesh Ladumor

7,052
5
42
55

answered Mar 17 '18 at 02:02

BradDaley

1

top nav bar blocking top content of the page

20 Answers20

Bootstrap 4 w/ internal page links

Linked

Related