How to change Bootstrap navbar collapse breakpoint

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 navbar changes to collapsed mode. I want to do this without using LESS, I am using stylus not LESS.

My issue is the same as in this question: Bootstrap 3 Navbar Collapse

But all the answers in that questions explain how to do it by changing LESS variable. I haven't been dealing with LESS, I am using stylus so I want to know how this can be done using stylus or another method.

Thanks!

Carol Skelly · Answer 1 · 2023-04-19T11:34:48.293

Bootstrap 5 (update 2023)

As stated in the docs,

For navbars that never collapse, add the .navbar-expand class on the navbar. For navbars that always collapse, don’t add any .navbar-expand class.

Bootstrap 4 (update 2018)

Changing the navbar breakpoint is easier in Bootstrap 4 using the navbar-expand-* classes:

<nav class="navbar fixed-top navbar-expand-sm">..</nav>

navbar-expand-sm = mobile menu on xs screens <576px
navbar-expand-md = mobile menu on sm screens <768px
navbar-expand-lg = mobile menu on md screens <992px
navbar-expand-xl = mobile menu on lg screens <1200px
navbar-expand = never use mobile menu
(no expand class) = always use mobile menu

If you exclude navbar-expand-* the mobile menu will be used at all widths. Here's a demo of all 6 navbar states: Bootstrap 4 Navbar Example

You can also use a custom breakpoint (???px) by adding a little CSS. For example, here's 1300px..

@media (min-width: 1300px){
    .navbar-expand-custom {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }
    .navbar-expand-custom .navbar-nav {
        flex-direction: row;
    }
    .navbar-expand-custom .dropdown-menu {
        position: absolute;
    }
    .navbar-expand-custom .nav-link {
        padding-right: .5rem;
        padding-left: .5rem;
    }
    .navbar-expand-custom > .container {
        flex-wrap: nowrap;
    }
    .navbar-expand-custom .navbar-collapse {
        display: flex!important;
        flex-basis: auto;
    }
    .navbar-expand-custom .navbar-toggler {
        display: none;
    }
}

Bootstrap 4 Custom Navbar Breakpoint
Bootstrap 4 Navbar Breakpoint Examples

Bootstrap 3

For Bootstrap 3.3.x, here is the working CSS to override the navbar breakpoint. Change 991px to the pixel dimension of the point at which you want the navbar to collapse...

@media (max-width: 991px) {
  .navbar-header {
      float: none;
  }
  .navbar-left,.navbar-right {
      float: none !important;
  }
  .navbar-toggle {
      display: block;
  }
  .navbar-collapse {
      border-top: 1px solid transparent;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  }
  .navbar-fixed-top {
      top: 0;
      border-width: 0 0 1px;
  }
  .navbar-collapse.collapse {
      display: none!important;
  }
  .navbar-nav {
      float: none!important;
      margin-top: 7.5px;
  }
  .navbar-nav>li {
      float: none;
  }
  .navbar-nav>li>a {
      padding-top: 10px;
      padding-bottom: 10px;
  }
  .collapse.in{
      display:block !important;
  }
}

Working example for 991px: https://codeply.com/p/GxWMLj14VJ
Working example for 1200px: https://codeply.com/go/VsYaOLzfb4 (with search form)

Note: The above works for anything over 768px. If you need to change it to less than 768px the example of less than 768px is here.

Try this First Visit :[link]( http://getbootstrap.com/customize/ Locate : ‘Less variables’ –> ‘Media queries breakpoints’ Change : @ screen-lg value from 1200px to 1920px Locate : “Grid system” –> @ grid-float-breakpoint Change : @ screen-sm-min to @ screen-lg Scroll to end of page. Click on “Compile and Download” Extract and use these downloaded files. — rpalzona, May 23 '16 at 13:03
I have many items in my navbar. I had to also add "overflow: scroll!important;" to ".collapse.in{}" definition. In bootstrap "max-height: 340px;" — jduhls, Aug 04 '16 at 14:28
This above code works when I set a value higher than 768px, however I need to achieve the reverse... I only want it to collapse for example at 400px, but when I set this value, bootstrap seems to be picking up the original 768 - Any ideas? Thanks — Chris Richards, Aug 16 '16 at 10:50
I would add a `float:none!important` to `.navbar-text` as well if you are using it `.navbar-left, .navbar-right, .navbar-text { float: none !important; }` — Paranoid Android, Mar 20 '17 at 12:35
Although this answer works like charm, but it's messing with ***[dropdown menu](http://www.bootply.com/GzDUNioL5h)***, maybe you need to improve answer. — Abhishek Pandey, May 08 '17 at 07:45
@AbhishekPandey I've found useful [this answer](https://stackoverflow.com/a/28659861/1485885) (part regarding dropdown) — cbuchart, Oct 07 '18 at 22:09
This solution almost worked perfectly for me. I had to add a rule for the dropdown menu as noted by others. In the parlance of the example for Bootstrap 4 above: `.navbar-expand-custom .navbar-nav .dropdown-menu { position: absolute; }` — BBQ Singular, May 05 '20 at 16:18

score 57 · Accepted Answer · edited Apr 04 '16 at 15:55

57

You have to write a specific media query for this, from your question, below 768px, the navbar will collapse, so apply it above 768px and below 1000px, just like that:

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

This will hide the navbar collapse until the default occurrence of the bootstrap unit. As the collapse class flips the inner assets inside navbar collapse will be automatically hidden, like wise you have to set your css as you desired design.

edited Apr 04 '16 at 15:55

Julian E.

4,687
6
32
49

answered Nov 07 '13 at 05:24

SaurabhLP

3,619
9
40
70

Currently the navbar collapses when the width is below 768px. But I want the navbar to collapse when the width is below 1000px. For this, wouldn't you need to show .collapse between 768 and 1000? – Nearpoint Nov 07 '13 at 05:43
yes, `collapse` class is important for mobile screen so that if width is below 768px the navbar will be `display:none`, so the required action would be applied inside 768 and 1000 mark... – SaurabhLP Nov 07 '13 at 05:48
66

this doesn't work on Bootstrap 3 because there is another rule `navbar-collapse.collapse` which has `display: block !important`. Disabling that will result in the collapse button not appearing... so I guess it's a lot of classes that needs to be redefined, not just `collapse` – Daniele Ricci Jan 22 '14 at 17:33
44

Yes, a bunch of Bootstrap classes must be overridden in the custom media query: http://bootply.com/120604 – Carol Skelly Feb 06 '15 at 10:29
3

Haha who the hell built bootstrap? Didn't think we would need to change that little detail? – M H May 15 '18 at 18:11
Zim, in your code you forgot this to avoid overflow when there are to many list items: .navbar-collapse.in { overflow-y: auto !important; } – LauraEld Jun 10 '20 at 07:50

score 46 · Answer 3 · answered Mar 05 '15 at 02:21

46

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

answered Mar 05 '15 at 02:21

fengd

7,551
3
41
44

17

Can you post an example, please? – e.thompsy Mar 30 '15 at 20:46
2

Keep in mind that if you are using sass and you don't want to replace the vendor code (you shouldn't), you have to include the file that contains the variable with your custom value before the bootstrap sass files. The reason being is all of Bootstrap’s variables are set to default! values, so we need to override these values by importing our variables first. – Makis K. Mar 23 '16 at 13:55
Please add an example of how to do this... I am new to bootstrap, and grep reveals 0 instances of this variable in my project. – Matt Clark May 09 '16 at 21:45
1

@MattClark `@grid-float-breakpoint` is defined on the compiler: http://getbootstrap.com/customize - the default value is `@screen-sm-min` but you can change it to `1234px`. – rybo111 May 18 '16 at 12:48

score 25 · Answer 4 · answered Mar 19 '14 at 06:42

25

Finally worked out how to change the collapse width by fiddling with '@grid-float-breakpoint' at http://getbootstrap.com/customize/.

Go to line 2923 in bootstrap.css(also min version) and change @media screen and (min-width: 768px) { to @media screen and (min-width: 1000px) {

So the code will end up being:

@media screen and (min-width: 1000px) {
  .navbar-brand {
    float: left;
    margin-right: 5px;
    margin-left: -15px;
  }
  .navbar-nav {
    float: left;
    margin-top: 0;
    margin-bottom: 0;
  }
  .navbar-nav > li {
    float: left;
  }
  .navbar-nav > li > a {
    border-radius: 0;
  }
  .navbar-nav.pull-right {
    float: right;
    width: auto;
  }
  .navbar-toggle {
    position: relative;
    top: auto;
    left: auto;
    display: none;
  }
  .nav-collapse.collapse {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }
}

answered Mar 19 '14 at 06:42

Stephen

1,528
2
13
10

Note the line number you quoted will be different if you've used the Customizer: http://getbootstrap.com/customize/ – henrywright Mar 27 '14 at 17:11
1

Just changed the `@grid-float-breakpoint` in my `responsive.less` works for me! – cvng Aug 29 '14 at 09:18
6

You should override that in another CSS file instead of changing the bootstrap css files directly. – Ivanka Todorova Sep 08 '15 at 06:07
1

First Visit :[link]( http://getbootstrap.com/customize/ Locate : ‘Less variables’ –> ‘Media queries breakpoints’ Change : @ screen-lg value from 1200px to 1920px Locate : “Grid system” –> @ grid-float-breakpoint Change : @ screen-sm-min to @ screen-lg Scroll to end of page. Click on “Compile and Download” Extract and use these downloaded files. – rpalzona May 23 '16 at 13:03

score 13 · Answer 5 · edited May 15 '15 at 20:00

13

I just did this successfully by using the following CSS code.

@media(max-width:1000px)  {

    .navbar-collapse.collapse {
        display: none !important;
    }

    .navbar-collapse {
        overflow-x: visible !important;
    }

    .navbar-collapse.in {
      overflow-y: auto !important;
    }

    .collapse.in {
      display: block !important;
    }

}

edited May 15 '15 at 20:00

jyoseph

5,435
9
45
64

answered Mar 18 '15 at 21:06

ruperto17

131
1
2

2

It doesn't show collapsed menu button when width is anywhere between 768px to 1000px. – craftsman Jun 06 '15 at 20:47
4

@craftsman : For the button, use this: .navbar-toggle { display: block !important; } .navbar-header { width: 100%; height: 60px; } – Aniket Suryavanshi Jun 23 '15 at 21:23
4

still does not show the content inside the hamburger menu – behzad Jul 13 '15 at 22:42

score 13 · Answer 6 · answered Aug 03 '15 at 13:35

13

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;

answered Aug 03 '15 at 13:35

iCollect.it Ltd

92,391
25
181
202

How to rebuild ? I tried this command line : `$ lessc bootstrap.less bootstrap.css` but nothing happened – AnthonyR Oct 21 '15 at 07:48
@AnthonyRn: I have no idea what your project setup is. I simply updated the Bootstrap LESS source in my VS 2013 project and it rebuilt on save. perhaps you should ask a new question? – iCollect.it Ltd Oct 21 '15 at 16:25
My problem was solved by using the online customizer tool of Bootstrap here http://getbootstrap.com/customize Thank you for the solution ! – AnthonyR Oct 22 '15 at 09:46
1

I think this should be the accepted answer, as it uses Bootstraps own methods for defining the breakpoint. As an example, I was able to simple 'rebuild' bootstrap, and have the desired result by setting this variable to what I needed to be the breakpoint. – Serge Melis Jul 01 '16 at 18:13
@AnthonyR To Rebuild you use the grunt command `grunt dist` which will regenreate the dist directory. You will run that command from the directory where you have your gruntfile.js. Reference: http://getbootstrap.com/getting-started/#grunt – Radmation Jun 26 '17 at 21:17

score 11 · Answer 7 · answered Jul 05 '16 at 06:51

11

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

answered Jul 05 '16 at 06:51

tropicalfish

1,230
1
16
29

score 8 · Answer 8 · answered May 27 '16 at 05:25

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

score 4 · Answer 9 · edited Oct 02 '17 at 19:30

4

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

edited Oct 02 '17 at 19:30

whitneyland

10,632
9
60
68

answered May 02 '16 at 17:11

Eddie Jaoude

1,698
15
23

In the current alpha, seems to only go to `navbar-toggleable-sm` for me, `xs` makes it never toggle. Could be me doing something wrong. Thanks! – nerdwaller Feb 04 '17 at 02:27
@nerdwaller looks like you're right, made an edit from xs to sm. – whitneyland Oct 02 '17 at 19:30

score 4 · Answer 10 · answered Nov 15 '17 at 00:51

This worked for me Bootstrap3

@media (min-width: 768px) {
    .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;
          margin: 7.5px -15px;
      }
      .navbar-nav>li {
          float: none;
      }
      .navbar-nav>li>a {
          padding-top: 10px;
          padding-bottom: 10px;
      }
}

Took a while to figure these two out:

.navbar-collapse.collapse {
   display: none!important;
}
.navbar-collapse.collapse.in {
   display: block!important;
}

This worked for me. The only exception is the minimum pixel width should be 1000px in your sample above. — Sascha, Nov 29 '18 at 18:46

score 3 · Answer 11 · answered Apr 08 '16 at 11:23

3

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

answered Apr 08 '16 at 11:23

Whip

1,891
22
43

Doesn't work completely. The menu items it displays are not vertical, but horizontal. – Volomike Mar 02 '20 at 03:57

score 2 · Answer 12 · answered Nov 07 '13 at 04:21

2

Your best bet would be to use a port of the CSS processor you use.

I'm a big fan of SASS so I currently use https://github.com/thomas-mcdonald/bootstrap-sass

It looks like there's a fork for Stylus here: https://github.com/Acquisio/bootstrap-stylus

Otherwise, Search & Replace is your best friend right in the css version...

answered Nov 07 '13 at 04:21

allaire

5,995
3
41
56

So for the search & replace option, does that mean edit the bootstrap.css media queries directly? Can I change a media query that only applies to the navbar? I was told it is not a good idea to edit the source bootstrap files, but I don't know why, what do you think? – Nearpoint Nov 07 '13 at 04:39

score 2 · Answer 13 · answered Jan 26 '18 at 11:19

Hi i think you can do it using CSS like this you can change breakpoint bootstrap menu

    @media (max-width: 1200px) {
    .navbar-header {
        float: none;
    }
    .navbar-left,.navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }

    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important; 
    }
    .navbar-nav>li {
        float: none;
    } 
    .collapse.in{
        display:block !important;
    }
   .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;
    }
}

score 1 · Answer 14 · answered Jul 18 '20 at 17:43

This is the working code for me. (Also the dropdown navbar links works)

@media (max-width: 1199px) {
  .navbar-nav {
    margin: 7.5px -15px;
 }
  .ul-links {
    display: block;
  }
  .navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 20px;
  }  
  .navbar-header {
      float: none;
  }
  .navbar-left,.navbar-right {
      float: none !important;
  }
  .navbar-toggle {
      display: block;
  }

  .navbar-collapse.collapse {
      display: none!important;
      max-height: none;
  }
  .navbar-nav {
      float: none!important; 
  }
  .navbar-nav>li {
      float: none;
  } 
  .collapse.in{
      display:block !important;
  }
 .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;
  }
}

score 0 · Answer 15 · answered Jun 03 '16 at 07:25

0

This is what did the trick for me:

@media only screen and (min-width:769px) and (max-width:1000px){
.navbar-collapse.collapse {
    display: none !important;
}
.navbar-collapse.collapse.in {
    display: block !important;
}
.navbar-header .collapse, .navbar-toggle {
    display:block !important;
}

answered Jun 03 '16 at 07:25

jeanverster

294
3
9

With your solution and the one by Veek I'm finding that between 768 and 1000 the margins expand, improperly. They are fine outside those limits. With your solution the icon for the collapsed menu also does not stay on the right after collapsing but presses up against the "brand". – Mike O'Connor Nov 07 '16 at 07:13
So sorry, I apparently goofed. I do still have that problem of the inappropriately-wide margins appearing inside those limits. However I see now that an official [online](http://getbootstrap.com/examples/navbar-fixed-top/) bootstrap example exhibits the same margins problem, natively. – Mike O'Connor Nov 07 '16 at 08:23

score 0 · Answer 16 · answered Feb 21 '18 at 14:26

In bootstrap 4, if you want to over-ride when navbar-expand-*, expands and collapses and shows and hides the hamburger (navbar-toggler) you have to find that style/definition in bootstrap.css, and redefine it in your own customstyle.css (or directly in bootstrap.css if you are so inclined).

Eg. I wanted the navbar-expand-lg to collapses and shows the navbar-toggler at 950px. In bootstrap.css I find:

@media (max-width: 991.98px) {
  .navbar-expand-lg > .container,
  .navbar-expand-lg > .container-fluid {
    padding-right: 0;
    padding-left: 0;
  }
}

And below that ...

@media (min-width:992px) { 
    ... lots of styling ...
}

I copied both @media queries and stuck them in my style.css, then modified the size to fit my needs. I my case I wanted it to collapse at 950px. The @media queries must need to be different sizes (I'm guessing), so I set container max-width to 949.98px and used the 950px for the other @media query and so the following code was appended to my style.css. This was not easy to detangle from twisted solutions I found on Stackoverflow and elsewhere. Hope this helps.

@media (max-width: 949.98px) {
    .navbar-expand-lg > .container,
    .navbar-expand-lg > .container-fluid {
        padding-right: 0;
        padding-left: 0;
    }
}

@media (min-width: 950px) {
    .navbar-expand-lg {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-flow: row nowrap;
        flex-flow: row nowrap;
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }
    .navbar-expand-lg .navbar-nav {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
    }
    .navbar-expand-lg .navbar-nav .dropdown-menu {
        position: absolute;
    }
    .navbar-expand-lg .navbar-nav .dropdown-menu-right {
        right: 0;
        left: auto;
    }
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 0.5rem;
        padding-left: 0.5rem;
    }
    .navbar-expand-lg > .container,
    .navbar-expand-lg > .container-fluid {
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }
    .navbar-expand-lg .navbar-collapse {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-preferred-size: auto;
        flex-basis: auto;
    }
    .navbar-expand-lg .navbar-toggler {
        display: none;
    }
    .navbar-expand-lg .dropup .dropdown-menu {
        top: auto;
        bottom: 100%;
    }
}

score 0 · Answer 17 · answered Mar 17 '18 at 07:10

Here my working code using in React with Bootstrap

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
    crossorigin="anonymous">
<style>
  @media (min-width: 768px) and (max-width: 1000px) {
   .navbar-collapse.collapse {
       display: none !important;
   }
   .navbar-toggle{
        display: block !important;
   }
   .navbar-header{
        float: none;
   }
}
  </style>

score 0 · Answer 18 · answered Jan 11 '20 at 01:57

0

It's now supported on Bootstrap 4.4

navbar-expand-sm

answered Jan 11 '20 at 01:57

Rick

12,606
2
43
41

Yes correct, but you would need navbar-expand-lg to collapse the nav on large screens – Sambuxc May 01 '20 at 11:06

How to change Bootstrap navbar collapse breakpoint

18 Answers18

Solution:

Linked

Related