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

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;
        }
    }

Answer 2

I created a separate SCSS file that listed all of the partials that bootstrap needs, that way I can turn the partials on and off depending on what our site needs. This way, I am able to override the breakpoint variable easily. Here's what I got:

// Core variables and mixins
$grid-float-breakpoint: 991px;
@import "bootstrap/variables";
@import "bootstrap/mixins";

// Reset
@import "bootstrap/normalize";
//@import "bootstrap/print";

// Core CSS
@import "bootstrap/scaffolding";
@import "bootstrap/type";
//@import "bootstrap/code";
@import "bootstrap/grid";
@import "bootstrap/tables";
@import "bootstrap/forms";
@import "bootstrap/buttons";

// Components
@import "bootstrap/component-animations";
@import "bootstrap/glyphicons";
@import "bootstrap/dropdowns";
//@import "bootstrap/button-groups";
//@import "bootstrap/input-groups";
@import "bootstrap/navs";
@import "bootstrap/navbar";
@import "bootstrap/breadcrumbs";
@import "bootstrap/pagination";
@import "bootstrap/pager";
@import "bootstrap/labels";
@import "bootstrap/badges";
//@import "bootstrap/jumbotron";
//@import "bootstrap/thumbnails";
@import "bootstrap/alerts";
//@import "bootstrap/progress-bars";
//@import "bootstrap/media";
//@import "bootstrap/list-group";
@import "bootstrap/panels";
//@import "bootstrap/wells";
@import "bootstrap/close";

// Components w/ JavaScript
@import "bootstrap/modals";
@import "bootstrap/tooltip";
//@import "bootstrap/popovers";
//@import "bootstrap/carousel";

// Utility classes
@import "bootstrap/utilities";
@import "bootstrap/responsive-utilities";

Answer 3

Bootstrap 4.x

It is a snap to change collapse threshold in Bootstrap 4.x. There are 6 cases:

1. Always expand, never collapse (i.e. breakpoint is 0px): <nav class="navbar navbar-expand">...</nav>
2. Breakpoint is sm (576px): <nav class="navbar navbar-expand-sm">...</nav>
3. Breakpoint is md (768px): <nav class="navbar navbar-expand-md">...</nav>
4. Breakpoint is lg (992px): <nav class="navbar navbar-expand-lg">...</nav>
5. Breakpoint is xl (1200px): <nav class="navbar navbar-expand-xl">.../nav>
6. Always collapse, never expand (i.e. breakpoint is ∞px). : <nav class="navbar">...</nav> (Just remove the navbar-expand-* class. Mobile-first as in Bootstrap 4.x)

Credit to this article by Carol Skelly I found https://medium.com/wdstack/examples-bootstrap-4-navbar-b3c9dc0edc1a

Answer 4

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

Bootstrap 3.x

using LESS, you can change the value of @screen-small to target your min size

example: @screen-small: 600px;

i use this to only switch to "tiny device" mode once the width is less than 600px