How to change navbar collapse threshold using Twitter bootstrap-responsive?

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

Answer 1

Here is my code (All other solution showed funky scrollbar as the navbar dropped down so I edited the code so it didn't). I could not post on other answer so I'll do it here for others to find. I am using rails to do this with Bootstrap 3.0.

assets/stylesheets/framework and overrides paste this: (Adjust max width to whatever value to achieve your goal.)

@media (max-width: 2500px) {
.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-collapse.collapse.in {
    display: block!important;
}
.navbar-nav {
    float: none!important;
}
.navbar-nav>li {
    float: none;
}
.navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
}

Answer 2

This is a great example of where you could be using the LESS version of the Bootstrap CSS files. How to do this is below.

Even better would be to submit this as a pull request on Github so that everyone can benefit and your "custom code" would hopefully be part of Bootstrap moving forward.

• Add a variable to variables.less that specifies when to collapse the navbar. Something like: @navCollapseWidth: 979px
• Then modify responsive-navbar.less...
  • Up top change @media (max-width: 979px) to @media (max-width: @navCollapseWidth)
  • At the bottom change @media (min-width: 980px) to @media (max-width: @navCollapseWidth - 1)

Of course... you'd have to compile LESS using one of the suggested methods.