48

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)

Edward
  • 603
  • 1
  • 9
  • 14

7 Answers7

93

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/

Gerfried
  • 6,193
  • 28
  • 47
  • 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? – Dave Oct 31 '15 at 05:22
  • 2
    It won't show the hamburger menu before the width is 768px or less. So there will be no menu between 768px and 991px. – AH. Aug 07 '17 at 11:31
  • 1
    Do you know why when using `navbar-fixed-top` an x-scrollbar appears when collapsing: https://jsfiddle.net/Lha14tm6/ – theyuv Nov 20 '18 at 10:17
  • @theyuv: I don't see any horizontal scrollbar in Chrome and IE – Gerfried Nov 20 '18 at 16:53
  • @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. – theyuv Nov 22 '18 at 06:48
  • you need to `float:left` to `.navbar-right !important` class and `float:none` to `.navbar-nav>li` – Bhadresh Arya Oct 14 '19 at 05:58
  • @theyuv: just add `.navbar-collapse { overflow-x:hidden; }` to get rid of the horizontal scrollbar. – rastik Oct 17 '20 at 19:20
11

In variables.less, change

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

to 

@grid-float-breakpoint: @screen-md-min;
Jeffrey Bosboom
  • 12,141
  • 16
  • 70
  • 85
barduro
  • 131
  • 2
  • 3
  • This actually worked very well for an 2 column / navbar application page we've built on Bootstrap 3.3.6. – klewis Mar 12 '16 at 15:35
  • 1
    Does this affect anything else besides the nav? – Lawyerson Oct 18 '16 at 14:17
  • 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. :-) – barduro Oct 31 '17 at 15:49
7

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.

Community
  • 1
  • 1
Ahmed Na.
  • 2,665
  • 1
  • 21
  • 23
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

jeanadam
  • 331
  • 3
  • 4
2

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.

Technology Garden
  • 21
  • 2
0

I would suggest bringing in bootstrap into your project in lieu of a CDN and simply look for the media query that looks like this:

@media (min-width: 768px) {
  .navbar-expand-md {
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap; //...etc.

And change it to:

@media (min-width: 900px) {
  .navbar-expand-md {
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap; // ...etc.

Or if you are using a CDN, create an override to that specific media query.

Erik James Robles
  • 581
  • 6
  • 18
0

If you want it is menu to be collapsable from medium devices

You can directly do by

toggleable="md"

Else you can go for other force collapsable approach by setting sccs/ less of bootstrap.

Rahul Mahale
  • 1