Twitter Bootstrap 3 - Navbar Fixed Top - Overlaps content when multiple lines

Question

First, this is not the body padding-top issue for the fixed top navigation.

body { padding-top: 40px; }

I've got a navbar that, for better or for worse, has a lot of data/information in it. The issue I'm having is that when the navbar breaks into multiple lines (which is perfectly fine) it overlaps the content (bad).

Here is an examples of what I'm seeing/experiencing. http://jsfiddle.net/jsuggs/ZaMs3/7/

Does anyone have either a clever javascript solution to change the body padding or a way to force a collapse when the navbar breaks into multiple lines?

Update

Here is what I ended up using. I had to add in some additional padding and combined the load and resize events.

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

Answer 1

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

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

Answer 2

One possible solution is to use media queries to check for different widths. Something like

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

worked for me on Chrome on your Fiddle.

The downside to this solution is, that it needs a lot of tweaking and changing if you modifiy your navigation elements and it might be hard to get it right on all browsers...