wpjw4w
Last Updated: March 20, 2017
·
196K
· iatek
24de118de418063d2370c3aa555a18a5

Change the Bootstrap NavBar Breakpoint

I follow the twitter-bootstrap tag on StackOverflow, and answer a LOT of questions relating the the Bootstrap navbar. Frequently I see cases where the navbar collapse into it's mobile state too soon (at to wide of a screen width), or too late (where the navbar links start to wrap at wider widths).

By default, Bootstrap collapses (vertically stacks) the navbar at 768 pixels. You can easily change this threshold using a simple CSS media query. For example, here we change the breakpoint threshold to 990 pixels, causing the navbar to collapse sooner..

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

Here's a working demo on Bootply:
http://www.bootply.com/105915

UPDATE for Bootstrap 3.1

The markup for 3.1 has changed slightly and the navbar is always mobile-first. To accomodate this, the CSS we use to override Bootstrap's breakpoint has changed. You can find the updated 3.1 example here: http://www.bootply.com/120604

@media (max-width: 1200px) {
    .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;
    }
}

UPDATE for Bootstrap 4

Bootstrap 4 will soon be in beta, and provides classes to make changing the navbar breakpoint easier. Now the Bootstrap 4 navbar breakpoint can be changed using the navbar-toggleable-* classes. Use the hidden-* utility classes to show/hide the toggle button.

For example, here's a navbar that collapse at the small screen (sm) breakpoint of 768 pixels. Notice the navbar-toggleable-sm class in the collapsing DIV.
<nav class="navbar navbar-dark bg-primary"> <div class="container-fluid"> <button class="navbar-toggler hidden-md-up pull-right" type="button" data-toggle="collapse" data-target="#collapsingNavbar2"> ☰ </button> <a class="navbar-brand" href="#">Navbar sm</a> <div class="collapse navbar-toggleable-sm" id="collapsingNavbar2"> <ul class="nav navbar-nav"> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> </ul> <ul class="nav navbar-nav pull-xs-right"> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> </ul> </div> </div> </nav>
Bootstrap 4 Navbar Demos: http://www.codeply.com/go/GVsytKbMkV

39 Responses
Add your response

14552

Hi Carol. This changes my navbar breakpoint. But when I click menu button it shows menu list an instantly collapse back. So menu doesn't stay open after button is clicked. Is this make any sense? Thanks.

over 1 year ago ·
14565
3b92989c923d017ffe6b6d4db28901c9

Thanks :)

over 1 year ago ·
14594
24de118de418063d2370c3aa555a18a5

Did you try the 2nd example (for Bootstrap 3.1)? The .collapse animates in 3.1 so the CSS needs to change.

over 1 year ago ·
14702
Hpyp3ld6 normal

First of all thank you I'm having a horrible time updating from Bootstrap 2.0 to 3.1

Your code worked perfectly except on the ipad. On the ipad the dropdown is a mess
Example: http://cms.leoncountyfl.gov/eisite/index.asp
Any help would be appreciated

over 1 year ago ·
14703
Hpyp3ld6 normal

Oh! My ipad needed to be updated. Once I was able to do that it worked perfectly.

THANK YOU!!!!

over 1 year ago ·
15918

This is cool, but http://www.bootply.com/120604 is a broken link. This link is supposed to show an update for 3.1.

Thanks!

over 1 year ago ·
15919
24de118de418063d2370c3aa555a18a5

The link seems to work fine for me?

over 1 year ago ·
15935

Worked perfectly. Ended my hour-long search for something that worked. Thank you.

over 1 year ago ·
16020
6811db2b37e824fdf6c5c4fcdddd4146

I noticed a bug with it (in Bootstap 3.1.1 at least). Its missing this rule as well in the override:
.navbar-collapse.in {
overflow-y: auto !important;
}
otherwise the menu breaks out of its box if there are too many items whereas the default behaviour is to add a scrollbar. I forked the bootply example here: http://www.bootply.com/ilvJ6ArXTW

over 1 year ago ·
16377

Any chance you can say where to change it in a Less variable?

over 1 year ago ·
16717
E7a5ae054c877a1c30da7fb11c935c47

Yay thanks so much, saved my bacon.

over 1 year ago ·
17058
Xh9cftil normal

Thank you! This was SUPER helpful!!!!

over 1 year ago ·
17141
7bcbf3f58ebce2f.profile normal

Thanks for this tutorial. How would you need to adjust this CSS so that the nav icon is black when using the standard navbar instead of the navbar-inverse? Example here: http://www.bootply.com/WG0rmcDsJ5

over 1 year ago ·
17255
Virr7fvc normal

Hi this tutorial is great, everything work well, one problem I am having is that in the mobile view when the nave bar drops down it is not expanding enough to show all the content within, can any one help?

I have added the following as noted above but this does not seem to have solved the problem

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

Example can be found here on my test site : http://www.andyclarkson.com/vape/index.asp

over 1 year ago ·
17256
Virr7fvc normal

Managed to fix it ... removed the max-height from the .navbar-fixed-top .navbar-collapse,.navbar-fixed-bottom .navbar-collapse{max-height:340px} in the bootstrap.min.css. If any one else has this issue

over 1 year ago ·
17342
Default profile 2 normal

Thank u very much for this great tutorial :). I was stuck in an project and was pulling my hairs before reading this tutorial.

over 1 year ago ·
17346
None

This is indeed fantastic, thanks for posting it. I am having one issue I am hoping I can get help with. My navbar contains dropdown menus and when the viewport is inbetween the new collapse point and the default small size, the dropdowns appear un-collapsed below the navbar instead of as part of the collapse. Here's my forked Bootply, can anyone help me figure this out? Thank you!

http://www.bootply.com/7qJfooKzXA

over 1 year ago ·
17653
Oa7ce  t normal

Hmmm...... I tried to copy your example css into my bootstrap css doc and run it, but nothing changed at all. My menu still drops down onto a second line and the wraps onto two lines before finally changing to the collapse menu button.

Yet, when I take just the nav html code and your css and drop it into bootply and run it, hey presto it works! So I'm now at even more of a loss as to why it won't work in my webpage. Anyone care to take a mooch and see if something jumps out at them. I know it'll be something stoopid and me being a noob, but hey, we all have those days........right :p

http://www.bootply.com/VrUzSBScIq#

over 1 year ago ·
17782
0 yths kblh068 o5vyqal 1qp2ppst4qv 9ql 1xs1jbysyizrnrndpk gt1pa0zmglgkun93uynt

Hey Guys, It worked for me like a charm but you may wanna add this to in above media query:
.navbar-collapse.collapse.in {
display: block !important;
}

Then it worked perfectly, without it, it was hiding the menu because of display:none!important;

Thanks

over 1 year ago ·
17785
Bab15fcabd71e892f6307c6417037b23

Thanks, worked great

over 1 year ago ·
17844
0 ourblbzfud5tluv4oinxlzj9uw8ffoo4yaxhlqebpuno4sjztehuwnowcfhakjiq07 wop4xnbxg

Thanks, this was very helpful.

over 1 year ago ·
17871
0 tpexez3zve8 aideryw2ebk44afyuljepzyhebi4fi17ptahovspxcb998b8fg4kp0et5rgfmkfz

Is there an implementation that will support a Navbar overflow: >>
As the window is re-sized, Navbar items would go to the '>>' dropdown, instead of having an all or nothing collapse? This would be similar to the behavior of Google Chrome's bookmark bar

over 1 year ago ·
18159
None

Thanks for this. I was very helpful. I checked for the word "awesome" in my mental dictionary and I saw your picture by the word.

over 1 year ago ·
18730
5d59040e82b5fd59f9fdd8671b99a1c5

you can just change the variable @grid-float-breakpoint

ps: version > 3.0

over 1 year ago ·
18869
None

Thanks Carol Skelly

over 1 year ago ·
20758
F96h gjn normal

Thanks @jun1st. Exactly what I was looking for!

over 1 year ago ·
20887
10639676 883961258299038 2753186371168989771 n

Thanks!!!!!

over 1 year ago ·
21109
None

How to add multiple breakpoint in navbar ? When we change size of the menu, the menu item will be hidden gradually.

over 1 year ago ·
21242
L5eo5zfj normal

This is not working for me. :( :( :( I had my 3.3.2 Bootstrap

over 1 year ago ·
21487
Deidmo4w normal

Thanks for sharing this :3

I've question : how to hide navbar after clicking any field on page?? sorry if this a bit confusing,, I'm bad at explaining :( hope you know what I mean

over 1 year ago ·
21834
0 xrvpdrku1vyifxpmx0m15pzsnayyt6yn9ecpwx8srog0t9djv0up8r3sz7d0tn8xp0ug8tcvxwuxbg0qpe07lxf9vwuobgwz9e0kalvraemtsqtxsjwomlqospnaagowxiuxwcfkikb

this is not working for me.

The collapse icon and the menu are opening at two different places

over 1 year ago ·
22604
58dc0e49c3f34d94eff3c315b57f3111 normal

Worked for me thanx :)

over 1 year ago ·
24663
Untitled 1

Thank you--this code worked. The only thing that bothers me is the dropdown menus still show up as pop-out menus instead of being embedded in the list (as they are below 768px). Is there a way to force the dropdown menus to conform to that mobile styling instead of popping up over the rest of the menu? Thanks!

over 1 year ago ·
26673
Default profile 3 normal

Simply WOW.. Do check out free movie websites http://www.techiepalar.org/free-movie-websites/

over 1 year ago ·
27672

Hi Carol. This changes my navbar breakpoint. But when I click menu button it shows menu list an instantly collapse back. So menu doesn't stay open after button is clicked.

10 months ago ·
28158
24de118de418063d2370c3aa555a18a5

The updated collapsing fix was posted a while ago: http://www.bootply.com/120604

6 months ago ·
28551

I think I must be missing something.

Do I simply include this at the end of bootstrap.css to overide the original settings & expect it to just work?

...that's what I did & it didn't.

Any help would be much appreciated. Thanks

about 2 months ago ·
28727
Dougbeney

To anyone that is having the issue of the navbar staying permanently closed, use this CSS. Fixed it for me.

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

You must also add this to the media query

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

5 days ago ·
28732

232/5000
Another option is to change the navbar collapse breakpoint variable in the "_variable.scss" file (for those using Bootstrap SASS). Just change the value of variable $grid-float-breakpoint to $screen-md-min !default.

3 days ago ·