Geek Answers Handbook

Twitter Bootstrap 3 - Navbar Fixed Top - Content Overlaps When Multiple Lines

Firstly, this is not a problem with filling the upper body for fixed top navigation.

body { padding-top: 40px; }

I have a navigator that, for better or worse, has a lot of data / information in it. The problem I am facing is that when the navbar breaks into multiple lines (which is perfectly normal), it overlaps the contents (bad).

Here are examples of what I see / experience. http://jsfiddle.net/jsuggs/ZaMs3/7/

Does anyone have a smart solution to alter body contents or a way to force collapse when navbar breaks into multiple lines?

Update

Here is what I ended up using. I had to add additional add-ons and combine load and resize events.

$(window).on('load resize', function() {
    $('body').css({"padding-top": $(".navbar").height() + 30 + "px"});
});
+4
2
$(window).on('resize load', function() {
    $('body').css({"padding-top": $(".navbar").height() + "px"});
});

http://jsbin.com/iJaJAzIM/2/edit

+8

- . -

@media screen and (max-width: 1414px) and (min-width: 768px) {
    body {
        padding-top: 80px;
    }
}

@media screen and (max-width: 902px) and (min-width: 768px)  {
    body {
        padding-top: 120px;
    }
}

Chrome .

, , , , , ...

+2

More articles:


All Articles