Last Updated: June 27, 2023
·
497.1K
· iatek

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

39 Responses
Add your response

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 ·

Thanks :)

over 1 year ago ·

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 ·

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 ·

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

THANK YOU!!!!

over 1 year ago ·

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 ·

The link seems to work fine for me?

over 1 year ago ·

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

over 1 year ago ·

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 ·

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

over 1 year ago ·

Yay thanks so much, saved my bacon.

over 1 year ago ·

Thank you! This was SUPER helpful!!!!

over 1 year ago ·

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 ·

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 ·

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 ·

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 ·

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 ·

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 ·

Thanks, worked great

over 1 year ago ·

Thanks, this was very helpful.

over 1 year ago ·

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 ·

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 ·

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

ps: version > 3.0

over 1 year ago ·

Thanks Carol Skelly

over 1 year ago ·

Thanks @jun1st. Exactly what I was looking for!

over 1 year ago ·

Thanks!!!!!

over 1 year ago ·

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 ·

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

over 1 year ago ·

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 ·

this is not working for me.

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

over 1 year ago ·

Worked for me thanx :)

over 1 year ago ·

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 ·

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.

over 1 year ago ·

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

over 1 year ago ·

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

over 1 year ago ·

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

over 1 year ago ·

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.

over 1 year ago ·

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.

over 1 year ago ·

incredible, thank you so much!

over 1 year ago ·

Have a fresh tip? Share with Coderwall community!

Post
Post a tip