CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstraptwitter-bootstrap-3
jsuggs
jsuggs

Reputation: 2652

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

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

Upvotes: 5

Views: 6587

Answers (2)

Christina
Christina

Reputation: 34652

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

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

Upvotes: 10

Syjin
Syjin

Reputation: 2810

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...

Upvotes: 1

Related Questions