Bootstrap: How to collapse navbar earlier

Question

I want to collapse my navbar in earlier resolution than 768px, for example 992px, how would I do that? thanks! (I know I can customize it on the bootstrap page, but I don't want to start my project over again with new bootstrap.css file)

Solution 1

If you don't want to manipulate Bootstrap by using Less/Sass (maybe because you want to load it via a CDN), this is what did the trick for me:

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

Demo: https://jsfiddle.net/0pmy8usr/

Add this in a separate CSS file and include it after bootstrap.css

UPDATE for Bootstrap 4:

@media(max-width:900px) {
  .navbar .navbar-brand {float:none;display: inline-block;}
  .navbar .navbar-nav>.nav-item { float: none; margin-left: .1rem;}
  .navbar .navbar-nav {float:none !important;}
  .nav-item{width:100%;text-align:left;} 
  .navbar-toggler {display: block !important;}
  .navbar-toggleable-sm.collapse {display:none !important}
  .navbar-toggleable-sm.collapse.in {display:block !important}
}

Demo: https://jsfiddle.net/mkvhbgnp/3/

Solution 2

In variables.less, change

@grid-float-breakpoint:   @screen-sm-min

to

@grid-float-breakpoint: @screen-md-min;  

Solution 3

If you need to collapse your navbar in earlier resolution than 768px so you will need to use @media min-width and max-width, and you don't need to start new project for doing that simply create new .css file ( example: custom.css) and inset it under your main bootstrap.css to override its values. and write this code inside it :

CODE:

@media (min-width: 992px) {
   .collapse {
       display: none !important;
   }
}

Also, you can have a look at this post: change bootstrap navbar collapse.

I hope this will give you the solution.

Solution 4

You can also override the bootstrap classes that close the gap. Bellow is the working code that overrides basic navbars with dropdown menus. Not all classes are overriden bellow, so depending on what you are using, you may need to override other classes.

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

click here for the live demo code

Solution 5

The solution is actually very simple. Use .navbar-expand-lg or .navbar-expand-xl class with <nav> tag.

Example :-

<nav class="navbar navbar-expand-lg navbar-light" role="navigation">
</nav>

Thank you all.

View more solutions

Comments

[user3806549]

This might help: stackoverflow.com/questions/18896591/…

[Zim]

The answer is here: stackoverflow.com/a/36289507/171456

[Dave]

An example of how to do this in the other direction would be helpful. For instance, how would you make it break at 480px instead?

[klewis]

This actually worked very well for an 2 column / navbar application page we've built on Bootstrap 3.3.6.

[Lawyerson]

Does this affect anything else besides the nav?

[AH.]

It won't show the hamburger menu before the width is 768px or less. So there will be no menu between 768px and 991px.

[barduro]

Lawyerson, no it does just that without affecting anything else, IMHO it's awesome because it solves the problem in a single line of code in a very clean manner. :-)

[theyuv]

Do you know why when using navbar-fixed-top an x-scrollbar appears when collapsing: jsfiddle.net/Lha14tm6

[ESP32]

@theyuv: I don't see any horizontal scrollbar in Chrome and IE

[theyuv]

@Gerfried while it's collapsing. And change the size to the size in question (ie: between 768 and 991). You have to make it a little bigger.

[Bhadresh Arya]

you need to float:left to .navbar-right !important class and float:none to .navbar-nav>li

[Joel Hager]

Please provide an example (in code) that would help show the solution to the OP. Thanks!

[rastik]

@theyuv: just add .navbar-collapse { overflow-x:hidden; } to get rid of the horizontal scrollbar.