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

css, javascript, jquery, twitter-bootstrap, twitter-bootstrap-3

Solution

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

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

Problem

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

Original source