twitter bootstrap navbar fixed top overlapping site

HtmlTwitter Bootstrap

Html Problem Overview

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?

Html Solutions

Solution 1 - Html

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.

Solution 2 - Html

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)

Solution 3 - Html

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

Solution 4 - Html

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

Solution 5 - Html

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

Solution 6 - Html

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

Solution 7 - Html

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

Solution 8 - Html

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

Solution 9 - Html

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.

Solution 10 - Html

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>

Solution 11 - Html

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

Solution 12 - Html

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.

Solution 13 - Html

use this class inside nav tag

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

For bootstrap 4

Solution 14 - Html

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

Solution 15 - Html

All you have to do is

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

Solution 16 - Html

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.

Solution 17 - Html

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.

Solution 18 - Html

This works and looks good for me.

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

Solution 19 - Html

I just wrapped the navbar in a

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

No fancy hocus pocus but it worked..

Categories
Recommended Html Solutions
Recommended Twitter Bootstrap Solutions

Previous Solution:

How to install a private NPM module without my own registry?

node.jsNpmPackageNpm Private-Modules

Next Solution:

Android - Launcher Icon Size

AndroidAndroid Icons

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionMatthew BermanView Question on Stackoverflow
Solution 1 - HtmlrfundukView Answer on Stackoverflow
Solution 2 - HtmlNick BisbyView Answer on Stackoverflow
Solution 3 - HtmlcatskyView Answer on Stackoverflow
Solution 4 - HtmlshivampipView Answer on Stackoverflow
Solution 5 - HtmlAram ParonikyanView Answer on Stackoverflow
Solution 6 - HtmlRickView Answer on Stackoverflow
Solution 7 - HtmldavidracView Answer on Stackoverflow
Solution 8 - HtmlDanView Answer on Stackoverflow
Solution 9 - HtmlJason ButlerView Answer on Stackoverflow
Solution 10 - HtmlTomas KubesView Answer on Stackoverflow
Solution 11 - HtmlRyanView Answer on Stackoverflow
Solution 12 - HtmlOliver KonigView Answer on Stackoverflow
Solution 13 - HtmlIamButtmanView Answer on Stackoverflow
Solution 14 - HtmlgasolinView Answer on Stackoverflow
Solution 15 - HtmlVenkat KotraView Answer on Stackoverflow
Solution 16 - HtmldanielmbarlowView Answer on Stackoverflow
Solution 17 - Htmldeveloper10View Answer on Stackoverflow
Solution 18 - HtmlX 47 48 - IRView Answer on Stackoverflow
Solution 19 - HtmlTTboosterView Answer on Stackoverflow