How to change navbar collapse threshold using Twit

Question

I'm using Twitter Bootstrap 2.0.1 in a Rails 3.1.2 project, implemented with bootstrap-sass. I'm loading both the bootstrap.css and the bootstrap-responsive.css files, as well as the bootstrap-collapse.js Javascript.

I have a fluid layout with a navbar similar to the example. This follows the navbar "responsive variation" instructions here. It works fine: if the page is narrower than about 940px, the navbar collapses and displays a "button" that I can click on to expand.

However my navbar looks good down to about 550px wide, i.e. it doesn't need to be collapsed unless the screen is very narrow.

How do I tell Bootstrap to only collapse the navbar if the screen is less than 550px wide?

Note that at this point I do not want to modify the other responsive behaviors, e.g. stacking elements instead of displaying them side by side.

Answer 1

Bootstrap 3.x

using SASS, you can change the value of $screen-sm to target your min size

example: $screen-sm: 600px;

You need to put this value in your application.scss file before the @import "bootstrap";

$screen-sm:600px;
@import "bootstrap";

Less variables begin with "@" just changed them to "$" to override them before the import.

Here is the list of variables.

Answer 2

bootstrap-sass will support the variable $navbarCollapseWidth in the next version (2.2.1.0). You'll be able to update it to do exactly what you want once that version is live!

Answer 3

Bootstrap > 2.1 && < 3

• Use the less version of bootstrap
• Change the @navbarCollapseWidth variable in variables.less
• Recompile.

Update 2013: The easy way

• Visit http://getbootstrap.com/customize/#less-variables
• Change @navbarCollapseWidth in the formfield
• Click "Compile and Download".

(THX to Archonic via comment)

Update 2014: Bootstrap 3.1.1 and 3.2 (they even added it to the documentation)

If you're customizing or overriding/editing .less variables, you're looking for:

//** Point at which the navbar becomes uncollapsed.
@grid-float-breakpoint:     @screen-sm-min;
//** Point at which the navbar begins collapsing.
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);

Answer 4

You are looking for line 239 of bootstrap-responsive.css

@media (max-width: 979px) {...}

Where the max-width value triggers the responsive nav. Change it to 550px or so and it should resize fine.

Answer 5

As of August 2013, a Bootstrap 3 "Customize and download" page can be found at http://getbootstrap.com/customize/

With Bootstrap 3, the relevant variable is @grid-float-breakpoint.

The following Stack Overflow page has additional details: Bootstrap 3 Navbar Collapse

Answer 6

Just write down this this code in your custom style.css file and it will work

@media (min-width: 768px) and (max-width: 991px) {
        .navbar-collapse.collapse {
            display: none !important;
        }
        .navbar-collapse.collapse.in {
            display: block !important;
        }
        .navbar-header .collapse, .navbar-toggle {
            display:block !important;
        }
        .navbar-header {
            float:none;
        }
        .navbar-nav {
            float: none !important;
            margin: 0px;
        }
        .navbar-nav {
            margin: 7.5px -15px;
        }
        .nav > li {
            position: relative;
            display: block;
        }
        .navbar-nav > li {
            float: none !important;
        }
        .nav > li > a {
            position: relative;
            display: block;
            padding: 10px 15px;
        }
        .navbar-collapse {
            padding-right: 15px;
            padding-left: 15px;
            overflow-x: visible;
            border-top: 1px solid transparent;
            box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.1) inset;
        }
        .nav {
            padding-left: 0px;
            margin-bottom: 0px;
            list-style: outside none none;
        }
    }