twitter bootstrap navbar fixed top overlapping site

Question

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?

score 569 · Accepted Answer · edited Jun 20 '20 at 09:12

569

Your answer is right in the docs:

Body padding required

The fixed navbar will overlay your other content, unless you add padding to 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.

edited Jun 20 '20 at 09:12

Community

1
1

answered Jun 20 '12 at 17:19

rfunduk

30,053
5
59
54

17

But when you minimizing the window the navbar appears after 40px how should i handle it.. – Aravindhan Aug 30 '12 at 14:44
5

It appears after 40px probably because you don't "add this after the core Bootstrap CSS and before the optional responsive CSS." – collimarco Nov 14 '12 at 22:24
What if you download the bootstrap and responsive CSS as a single file, as they're provided on the download page? – JerSchneid Dec 20 '12 at 20:35
1

This answer is true, but it only works well when you make the 40px padding a responsive styling, see Dan or Nick's answer. – Tony Bathgate Mar 29 '13 at 18:14
@Astrowalker, solved with this code: `

` – dani herrera Jul 31 '13 at 13:48
1

See the answer from @qub1n if you do not want to add padding (or anything else). – scharfmn Mar 27 '15 at 08:54
2

@JerSchneid The example for navbar-fixed-top on w3schools.com shows the same behaviour. I'm inclined to call it a bug. – Tony Martin May 25 '16 at 10:29
2

I also needed something like `html {scroll-padding-top: 70px}` for to make the linking work properly to subsections of the pages... – User12345 Jan 22 '21 at 19:38

score 136 · Answer 2 · answered Oct 24 '12 at 14:56

136

As others have stated adding a padding-top to body works great. But when you make the screen narrower (to cell phone widths) there is a gap between the navbar and the body. Also, a crowded navbar can wrap to a multi-line bar, overwriting some of the content again.

This solved these kinds of issues for me

body { padding-top: 40px; }
@media screen and (max-width: 768px) {
    body { padding-top: 0px; }
}

This makes a 40px padding by default and 0px when under 768px width (which according to bootstrap's docs is the cell phone layout cutoff where the gap would be created)

answered Oct 24 '12 at 14:56

Nick Bisby

1,499
1
9
7

1

Does this solution also go between the core Bootstrap CSS and the responsive CSS imports? I'm still seeing the gap when the window width is less than 980. I'm guessing the later import of the responsive CSS overrides. If I move this solution under the responsive CSS import, then I still get the body padding, *plus* an extra line in the menu bar. – slothbear May 19 '13 at 03:03
I'm using Twitter Bootstrap 2.3.2. I noticed the doc no longer contains the 40px suggestion, though the need still exists. – slothbear May 19 '13 at 03:09
1

Eh, the 40px suggestion is still there, it just moved. Sorry for the comment spam. – slothbear May 19 '13 at 03:16
3

by Bootstrap 3.+ `body { padding-top: 40px; }` is enough – andilabs May 11 '14 at 18:13
9

This solution is on the right track. Simply putting padding in the body, as documented, is not enough, even on 3.+. With the right combination of media queries the desired effect can be achieved as the navbar wraps with browser re-sizing. In my case I need to change the padding at 1148px, 900px, and 768px widths. – John McCann Nov 20 '14 at 00:18
In Bootstrap 5.1.3 the top is still overlapping. – Timo Jun 29 '22 at 05:52

score 39 · Answer 3 · answered Jun 18 '15 at 22:04

39

a much more handy solution for your reference, it works perfect in all of my projects:

change your first line from

.navbar.navbar-fixed-top

to

.navbar.navbar-default.navbar-static-top

answered Jun 18 '15 at 22:04

catsky

1,193
10
7

1

are you just trolling? or have i overseen something? – chyno Jul 14 '16 at 12:06
How did this get 10 upvotes? navbar-default just adds color and background color... – Denny Mueller Jul 26 '16 at 08:43
4

navbar-static-top is the the change and it worked for me. Thanks! – kevthanewversi Jan 12 '17 at 08:41
This resolved my issue too. The javascript solution also did th trick. – NINtender Feb 16 '17 at 21:59
1

navbar-static-top fixed it for me as well. Least intrusive. – xpagesbeast Mar 13 '18 at 20:22
6

This works if you don't need the navbar to be always visible on top of the screen. The navbar-static-top is not fixed, it scrolls with the screen. This exemplifies the different navbar styles: https://getbootstrap.com/docs/3.3/examples/navbar-static-top – Victor Ionescu Jan 27 '19 at 05:43
Minus one, does not work for me, the navbar disappears with scrolling. – Timo Jun 28 '22 at 21:07

score 36 · Answer 4 · answered Aug 07 '19 at 14:50

36

Just change fixed-top with sticky-top. this way you won't have to calculate the padding.
And it works!!

answered Aug 07 '19 at 14:50

shivampip

2,004
19
19

`Also note that .sticky-top uses position: sticky, which isn’t fully supported in every browser.` See - https://getbootstrap.com/docs/4.5/components/navbar/#placement – Abhilash Kishore Jun 17 '20 at 18:42
This looks like a repeat answer. Someone put this in 2018. – Cheesus Toast Dec 26 '21 at 03:29
Similar result as `fixed-top`. Does an overlay. – Timo Jun 28 '22 at 21:07

Rick · Answer 5 · 2018-07-20T13:35:47.993

31

The solution for Bootstrap 4, it works perfect in all of my projects:

change your first line from

navbar-fixed-top

to

sticky-top

Bootstrap documentation reference

About time they did this right :D

edited Jul 20 '18 at 13:35

answered Jul 20 '18 at 13:25

Rick

1,177
1
19
27

Some people might use fixed-top in order to see the links as you scroll down the page; though this feature could be useful if you don't care about that :) – knowledge_is_power Sep 02 '18 at 01:37
Also note that .sticky-top uses position: sticky, which isn’t fully supported in every browser. – live-love Jun 10 '19 at 18:50
Other than the comments the others wrote, this does seem an updated way in comparison to the: body { padding-top: 70px; }. It is obviously way easier, but I will have to look to see if it works without issues. – Cheesus Toast Dec 26 '21 at 03:24
Changing to sticky-top from fixed-top still leaves the site overlapping on the top. Definition is `Position an element at the top of the viewport, from edge to edge, but only after you scroll past it.`. – Timo Jun 29 '22 at 05:43

score 29 · Answer 6 · answered Oct 17 '13 at 06:50

29

@Ryan, you are right, hard-coding the height will make it work bad in case of custom navbars. This is the code I am using for BS 3.0.0 happily:

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

answered Oct 17 '13 at 06:50

Aram Paronikyan

1,598
17
22

4

Instead of using `parseInt` on the css values of height, I just used `$('#main-navbar').height()`, but otherwise this was very helpful and solved my issue, thank you. – tylerwal Aug 19 '16 at 17:52
Unless your navbar is fixed height, this is what you need. – CraigP Nov 07 '19 at 01:04
What is the height() jquery function in vanilla js? what is `main-navbar` related to which html element? – Timo Jun 28 '22 at 21:10

score 27 · Answer 7 · edited Oct 14 '12 at 21:35

27

This issue is known and there's a workaround in the twitter bootstrap site:

When you affix the navbar, remember to account for the hidden area underneath. Add 40px or more of padding to the <body>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.

This worked for me:

body { padding-top: 40px; }

edited Oct 14 '12 at 21:35

friism

19,068
5
80
116

answered Jun 20 '12 at 17:22

davidrac

10,723
3
39
71

9

But when you minimizing the window the navbar appears after 40px how should i handle it.. – Aravindhan Aug 30 '12 at 14:47
1

yes, this solution doesn't work well on mobile screen sizes. In fact in wide-screen mode on my phone it basically renders the site useless. – Tony Bathgate Mar 29 '13 at 18:11
what optional responsive CSS ? I've ever only used one (core) bootstrap CSS - I'm talking above version 3.7.x UPWARDS; was it split in different CSS's prior to version 3.7.x ? – joedotnot Nov 17 '19 at 06:24

Dan · Answer 8 · 2012-12-22T16:28:08.320

22

I put this before the yield container:

<div id="fix-for-navbar-fixed-top-spacing" style="height: 42px;">&nbsp;</div>

I like this approach because it documents the hack needed to get it work, plus it also works for the mobile nav.

EDIT - this works much better:

@media (min-width: 980px) {
  body {
    padding-top: 60px;
    padding-bottom: 42px;
  }
}

edited Dec 22 '12 at 16:28

answered Dec 22 '12 at 16:09

Dan

1,729
18
11

score 18 · Answer 9 · answered Mar 16 '16 at 01:44

18

As I've posted in a similar question, 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:44

Jason Butler

626
1
13
25

This is what we do.. places the body content in exactly the correct spot without any js code, guessing or anything. . – FredArters Jul 13 '16 at 15:01
1

Thid deserves way more upvotes, Works perfectly fine, is ugly as hell but only the code :D – JRsz Jul 14 '16 at 18:23
Thanks, this is a much more elegant solution than top padding or margin pixels and stuff... – Pedro Reis Aug 01 '16 at 09:43
3

Unfortunately this doesn't work for mobile, when navs get into 1 column. – Pedro Reis Aug 05 '16 at 10:38

score 16 · Answer 10 · answered Jan 10 '15 at 22:48

16

The problem is with navbar-fixed-top, which will overlay your content unless specify body-padding. No solution provided here works in 100% cases. The JQuery solution blink/shift the page after the page is loaded, which looks weird.

The real solution for me is not to use navbar-fixed-top, but navbar-static-top.

.navbar { margin-bottom:0px;} //for jumtron support, see http://stackoverflow.com/questions/23911242/gap-between-navbar-and-jumbotron

<nav class="navbar navbar-inverse navbar-static-top">
...
</nav>

answered Jan 10 '15 at 22:48

Tomas Kubes

23,880
18
111
148

1

Yes, that's better, because the padding of the body is dynamic for each screen size, their solution is not good. – Ronen Festinger Mar 31 '15 at 22:26
But then there's a strip of blank white space above the navbar. – Apr 22 '17 at 07:49

Ryan · Answer 11 · 2013-08-05T15:20:46.863

All the previous solutions hard-code 40 pixels specifically into the html or CSS in one fashion or another. What if the navbar contains a different font-size or an image? What if I have a good reason not to mess with the body padding in the first place? I have been searching for a solution to this problem, and here is what I came up with:

$(document).ready(function(){
    $('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height()) + 1 )+'px'});
    $(window).resize(function(){
        $('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height()) + 1 )+'px'});
});

You can move it up or down by adjusting the '1'. It seems to work for me regardless of the size of the content in the navbar, before and after resizing.

I am curious what others think about this: please share your thoughts. (It will be refactored as not to repeat, btw.) Besides using jQuery, are there any other reasons not to approach the problem this way? I've even got it working with a secondary navbar like this:

$('.contentwrap') .css({'margin-top': (($('.navbar-fixed-top').height())
        + $('.admin-nav').height() + 1 )+'px'});

PS: Above is on Bootstrap 2.3.2 - will it work in 3.x As long as the generic class names remain... in fact, it should work independent of bootstrap, right?

EDIT: Here is a complete jquery function that handles two stacked, responsive fixed navbars of dynamic size. It requires 3 html classes(or could use id's): user-top, admin-top, and contentwrap:

$(document).ready(function(){

    $('.admin-top').css({'margin-top':($('.user-top').height()+0)+'px'});
    $('.contentwrap') .css({'padding-top': (
        $('.user-top').height()
         + $('.admin-top').height()
         + 0 )+'px'
    });

    $(window).resize(function(){
        $('.admin-top').css({'margin-top':($('.user-top').height()+0)+'px'});
        $('.contentwrap') .css({'padding-top': (
            $('.user-top').height()
             + $('.admin-top').height()
             + 0 )+'px'
        });
});

Just FYI I am using this and it works great, but for some odd reason if I have two navbars, one normal size and one for small screens it only works on the bigger one? — NaughtySquid, Oct 02 '14 at 09:56
@LiamDawe maybe you have more than one '.user-top' (for example) on the page, in which case the .height() might get confused...? — Ryan, Oct 02 '14 at 22:31

Oliver Konig · Answer 12 · 2014-05-29T07:24:25.467

11

For handling wrapping lines in menu-bar, apply an id to the navbar, like this:

<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="topnavbar">

and add this small script in the head after including the jquery, like this:

<script>
    $(document).ready(function(){
        $(document.body).css('padding-top', $('#topnavbar').height() + 10);
        $(window).resize(function(){
            $(document.body).css('padding-top', $('#topnavbar').height() + 10);
        });
    });
</script>

That way, the top-padding of the body gets automatically adjusted.

edited May 29 '14 at 07:24

answered Nov 25 '13 at 16:00

Oliver Konig

1,035
2
14
17

I had to change the second reference to height in your example to be $('#topnavbar').height() and then this worked perfectly for me. Thanks! – notruthless May 28 '14 at 19:47
1

Thanks for the comment! I fixed it in the answer. – Oliver Konig May 29 '14 at 07:24
This is the best solution I have come across that works on the PC, iOS, Android - all devices. All others are either hard-coded pixel values or too lengthy and do not work across all devices. – Oracular Man May 03 '18 at 00:48
Nice solution. I was having some small offsets that were not being taken into account in the calculation. I guess it was because my navigation bar was having some margins. I chose to change the height() call for a outerHeight() call instead to take this into consideration. – Leonardo Santos Jun 14 '20 at 02:31

IamButtman · Answer 13 · 2019-03-27T09:55:36.767

6

use this class inside nav tag

class="navbar navbar-expand-lg navbar-light bg-light sticky-top"

For bootstrap 4

edited Mar 27 '19 at 09:55

answered Jan 30 '19 at 19:30

IamButtman

307
3
15

I'll never know why it was downvoted, since it was working for me and all others. – IamButtman Mar 13 '19 at 10:15
1

This is correct. The only issue is that, at the docs, it say "The .sticky-top utility uses CSS’s position: sticky, which isn’t fully supported in all browsers" – José Jun 20 '19 at 21:26
this is definitely the one that did it for me. – jimh Jul 21 '20 at 00:58
Maybe was down-voted because, like another answer here, it has already been said. – Cheesus Toast Dec 26 '21 at 03:30

score 4 · Answer 14 · answered Dec 06 '14 at 08:42

for Bootstrap 3.+ , I'd use following CSS to fix navbar-fixed-top and the anchor jump overlapped issue based on https://github.com/twbs/bootstrap/issues/1768

/* fix fixed-bar */
body { padding-top: 40px; }
@media screen and (max-width: 768px) {
  body { padding-top: 40px; }
}

/* fix fixed-bar jumping to in-page anchor issue */
*[id]:before { 
  display: block; 
  content: " "; 
  margin-top: -75px; 
  height: 75px; 
  visibility: hidden; 
}

score 1 · Answer 15 · answered Aug 13 '14 at 02:13

1

All you have to do is

@media (min-width: 980px) { body { padding-top: 40px; } }

answered Aug 13 '14 at 02:13

Venkat Kotra

10,413
3
49
53

score 0 · Answer 16 · edited Jun 20 '20 at 09:12

Further to Nick Bisby's answer, if you get this problem using HAML in rails and you have applied Roberto Barros' fix here:

I replaced the require in the "bootstrap_and_overrides.css" to:

=require twitter-bootstrap-static/bootstrap.css.erb

(See https://github.com/seyhunak/twitter-bootstrap-rails/issues/91)

... you need to put the body CSS before the require statement as follows:

@import "twitter/bootstrap/bootstrap";
body { padding-top: 40px; }
@import "twitter/bootstrap/responsive";
=require twitter-bootstrap-static/bootstrap.css.erb

If the require statement is before the body CSS, it will not take effect.

score 0 · Answer 17 · answered Apr 30 '15 at 18:29

0

I would do this:

// add appropriate media query if required to target mobile nav only
.nav { overflow-y: hidden !important }

This should make sure the nav block doesn't stretch downpage and covers the page content.

answered Apr 30 '15 at 18:29

developer10

1,450
2
15
31

X 47 48 - IR · Answer 18 · 2021-11-27T14:05:35.447

0

This works and looks good for me.

<body class="pt-5 mt-4">....</body>

edited Nov 27 '21 at 14:05

answered Nov 27 '21 at 13:56

X 47 48 - IR

1,250
1
15
28

Tbh that looks like tailwind to me. Not everyone uses 2 frameworks at the same time. I just use bootstrap alone. – Cheesus Toast Dec 26 '21 at 03:18
1

@CheesusToast It's Bootstrap (V5 and V4) – X 47 48 - IR Dec 27 '21 at 09:20
Right ok, my bad. It just looked purely tailwind, so I am a bit behind the times with bootstrap then. I just checked and yes they use pt etc now. – Cheesus Toast Dec 27 '21 at 17:48

score -4 · Answer 19 · answered Mar 05 '14 at 01:19

-4

I just wrapped the navbar in a

<div width="100%">
<div class="nav-? ??">
...
</nav>
</div>

No fancy hocus pocus but it worked..

answered Mar 05 '14 at 01:19

TTbooster

5
3

Your answer is unclear and fails to address the issue. What does `nav-? ??` represent? – fragilewindows Dec 07 '16 at 13:20

twitter bootstrap navbar fixed top overlapping site

19 Answers19

Body padding required

Linked

Related