Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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"});
});
like image 731
jsuggs Avatar asked Dec 05 '13 07:12

jsuggs


People also ask

How to create a fixed top navbar in Bootstrap?

Bootstrap Fixed Navbar. Bootstrap also provides mechanism to create navbar that is fixed on the top or bottom of the viewport and will scroll with the content on the page. Creating the Fixed to Top Navbar. Apply the position utility class .fixed-top to the .navbar element to fix the navbar at the top of the viewport, so that it won't scroll ...

How to fix The navbar to the top of the page?

Bootstrap also provides mechanism to create navbar that is fixed to the top, fixed to the bottom, or stickied to the top (i.e. scrolls with the page until it reaches the top, then stays there). Apply the position utility class .fixed-top to the .navbar element to fix the navbar at the top of the viewport, so that it won't scroll with the page.

How to create a Twitter Bootstrap dropdown list with navigation?

But, since Twitter Bootstrap Dropdown takes help of JavaScript, so you need to insert following two lines of codes into the HTML page. You may insert them right before the </body> tag. For inserting a search form into the navbar, right after the <ul> containing the dropdown list, insert the following code.

Is there a series of Twitter Bootstrap tutorials?

W3resource has an existing series of Twitter Bootstrap Tutorial discussing the framework in detail. We will update the entire series with the latest version 3.0.0 and will add more useful content and examples. Please subscribe to our Feed to stay tuned.


2 Answers

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

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

like image 169
Christina Avatar answered Oct 01 '22 11:10

Christina


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

like image 36
Syjin Avatar answered Oct 01 '22 12:10

Syjin