Twitter Bootstrap 3 navbar-collapse - set width to collapse

Question

I use Twitter Bootsrap 3 with navbar-collapse : http://bootply.com/91119

When you reduce the width of the page, the menu splits into two lines, and subsequently collapse. I do no splits into two lines, but want to do collapse. What do I do?

Answer 1

You can decrease the point at which the navbar collapses..

Option 1

From the Bootstrap docs (http://getbootstrap.com/components/#navbar)

Depending on the content in your navbar, you might need to change the point at which your navbar switches between collapsed and horizontal mode. Customize the @grid-float-breakpoint variable or add your own media query.

Option 2

If you don't want a custom Bootstrap build, you can use a CSS media query. For example here is setting the breakpoint a 1280 pixels:

@media (max-width: 1280px) {
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

http://www.bootply.com/98488

Update for Bootstrap 3.1

The navbar in 3.1 has changed, so the CSS to override the breakpoint is different than 3.0. This will prevent the navbar from showing and then suddenly collapsing in 3.1 http://www.bootply.com/120604