Bootstrap Navbar Not Collapsing As Expected - Separating Onto Two Lines

Question Background: I'm using Twitter Bootstrap on my site and have incorporated a collpasing navbar for my sites menu. The Issue: The NavBarcollapses to a button as expected but

Solution 1:

The nav is wrapping in to 2 lines because you have many menu items and the Bootstrap container switches to 750px as the screen width shrinks. You have 2 options..

One option is to use the full width container-fluid (this may not work for your design): http://codeply.com/go/TfbwIivilI

Another option is to decrease the point at which the navbar collapses. This requires CSS to override the default navbar collapse point. In your case around 1000px seems to work best: http://codeply.com/go/kcaXYh7ARB

Solution 2:

It happenes because you have so many li elements, so what you need is to change the collapse break point. Just add the following to your css

@media(max-width:992px) {
.nav>li>a {
    padding-left: 10px;
    padding-right:10px
    }
}

bootply.