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 (alpha 2) Navbar Demos: http://www.codeply.com/go/GVsytKbMkV
Update for Bootstrap 4 (alpha 6): https://medium.com/wdstack/examples-bootstrap-4-navbar-b3c9dc0edc1a
Written by Carol Skelly
Related protips
39 Responses
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.
Thanks :)
Did you try the 2nd example (for Bootstrap 3.1)? The .collapse animates in 3.1 so the CSS needs to change.
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
Oh! My ipad needed to be updated. Once I was able to do that it worked perfectly.
THANK YOU!!!!
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!
The link seems to work fine for me?
Worked perfectly. Ended my hour-long search for something that worked. Thank you.
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
Any chance you can say where to change it in a Less variable?
Yay thanks so much, saved my bacon.
Thank you! This was SUPER helpful!!!!
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
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
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
Thank u very much for this great tutorial :). I was stuck in an project and was pulling my hairs before reading this tutorial.
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
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
Thanks, worked great
Thanks, this was very helpful.
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
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.
you can just change the variable @grid-float-breakpoint
ps: version > 3.0
Thanks Carol Skelly
Thanks @jun1st. Exactly what I was looking for!
Thanks!!!!!
How to add multiple breakpoint in navbar ? When we change size of the menu, the menu item will be hidden gradually.
This is not working for me. :( :( :( I had my 3.3.2 Bootstrap
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
this is not working for me.
The collapse icon and the menu are opening at two different places
Worked for me thanx :)
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!
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.
The updated collapsing fix was posted a while ago: http://www.bootply.com/120604
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
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;
}
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.
Thanks! This is very helpful! Just wondering, how do you change the screen width at which dropdown menus in the navbar use their mobile/collapsable form? When I click on the drop down menu on my iPad, it still shows the full display version.
incredible, thank you so much!
