Change bootstrap navbar collapse breakpoint without using LESS

Question

Currently when the browser width drops below 768px, the navbar changes to collapsed mode. I want to change this width to 1000px so when the browser is below 1000px the navba

Answer 1

In addition to @Skely answer, to make dropdown menus inside the navbar work, also add their classes to be overriden. Final code bellow:

    @media (min-width: 768px) and (max-width: 991px) {
        .navbar-nav .open .dropdown-menu {
            position: static;
            float: none;
            width: auto;
            margin-top: 0;
            background-color: transparent;
            border: 0;
            -webkit-box-shadow: none;
            box-shadow: none;
        }
        .navbar-nav .open .dropdown-menu > li > a {
            line-height: 20px;
        }
        .navbar-nav .open .dropdown-menu > li > a,
        .navbar-nav .open .dropdown-menu .dropdown-header {
            padding: 5px 15px 5px 25px;
        }
        .dropdown-menu > li > a {
            display: block;
            padding: 3px 20px;
            clear: both;
            font-weight: normal;
            line-height: 1.42857143;
            color: #333;
            white-space: nowrap;
        }
        .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;*/
            margin: 7.5px 50px 7.5px -15px
        }
        .navbar-nav>li {
            float: none;
        }
        .navbar-nav>li>a {
            padding-top: 10px;
            padding-bottom: 10px;
        }
        .navbar-text {
            float: none;
            margin: 15px 0;
        }
        /* since 3.1.0 */
        .navbar-collapse.collapse.in { 
            display: block!important;
        }
        .collapsing {
            overflow: hidden!important;
        }
    }

demo code

Answer 2

For Bootstrap 3.3 this is the only code you need:

@media (min-width: 768px) and (max-width: 1000px) {
   .navbar-collapse.collapse {
       display: none !important;
   }
   .navbar-toggle{
        display: block !important;
   }
   .navbar-header{
        float: none;
   }
}

Answer 3

The Sass way of changing bootstrap variables is actually documented on the bootstrap-sass github page.

Just redefine the variables before you @import bootstrap:

$grid-float-breakpoint: 1000px;

@import 'bootstrap';

Answer 4

in bootstrap3, change this variable @grid-float-breakpoint to the one you need. The default value is 768px

Answer 5

In the Bootstrap 3 .LESS source code, there is a variable defined in variables.less called @grid-float-breakpoint which has the following helpful comment:

//**Point at which the navbar becomes uncollapsed
@grid-float-breakpoint: @screen-sm-min;

The matching @grid-float-breakpoint-max value is set to that minus 1px:

//**Point at which the navbar begins collapsing
@grid-float-breakpoint-max: (@grid-float-breakpoint-max - 1);

Solution:

So just set the @grid-float-breakpoint value to 1000px instead and rebuild bootstrap.less into bootstrap.css:

e.g.

@grid-float-breakpoint: 1000px;

Answer 6

In bootstrap v4, the navigation can be collapsed sooner or later using different css classes

eg:

• navbar-toggleable-sm
• navbar-toggleable-md
• navbar-toggleable-lg

With the button for the navigation:

• hidden-sm-up
• hidden-md-up
• hidden-lg-up