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?

Solution

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

Comments

[Alyas]

Thanks Skelly, It helped me too :)

[Andrew Trevers]

In 3.1, option 1 of customizing @grid-float-breakpoint will still work, as the Less still uses this variable to produce the updated CSS. My preferred technique for amending the variable is to use the source Less in my project, and override variables individually in a new LESS file that imports bootstrap.less - that way, you can upgrade to newer versions of Bootstrap without losing any customizations.