Bootstrap 3 Navbar Collapse

Question

Is there any way to increase the point at which the bootstrap 3 navbar collapses (i.e. so that it collapses into a drop down on portrait tablets)?

These two were applicable to bootstrap 2 but not now!

How to change navbar collapse threshold using Twitter bootstrap-responsive?

Change the default responsive navbar breakpoint

it looked to me that the code itself had been changed quite a bit — timhc22, Aug 13 '13 at 12:56
I dont quite follow. The CSS code you mean? Classes should be generally the same with a few Minor tweaks — PW Kad, Aug 13 '13 at 14:45
don't worry I think I was getting confused because of the customised downloads (one of the answers I posted a link to specified a specific line number to edit) — timhc22, Aug 14 '13 at 15:33
http://stackoverflow.com/a/23536146/563309 - worked for me, will help someone... — RasikaSam, Jun 24 '14 at 13:24
It would be nice if we can define this inline in future, e.g. ` — rybo111, Sep 15 '15 at 17:30
Here is the working CSS solution: http://stackoverflow.com/a/36289507/171456 — Carol Skelly, Feb 09 '17 at 16:59

Seb33300 · Accepted Answer · 2018-01-19T09:28:33.227

346

I had the same problem today.

Bootstrap 4

It's a native functionality: https://getbootstrap.com/docs/4.0/components/navbar/#responsive-behaviors

You have to use .navbar-expand{-sm|-md|-lg|-xl} classes:

<nav class="navbar navbar-expand-md navbar-light bg-light">

Bootstrap 3

@media (max-width: 991px) {
    .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;
    }
    .navbar-text {
        float: none;
        margin: 15px 0;
    }
    /* since 3.1.0 */
    .navbar-collapse.collapse.in { 
        display: block!important;
    }
    .collapsing {
        overflow: hidden!important;
    }
}

Just change 991px by 1199px for md sizes.

Demo

edited Jan 19 '18 at 09:28

answered Nov 27 '13 at 17:42

Seb33300

7,464
2
40
57

22

Had to add `.navbar-collapse.collapse.in { display: block!important; }` to prevent it from disappearing. Good job though, saved me hours. – Dave Forber Mar 19 '14 at 16:47
2

Great alternative but had to add .navbar-collapse.collapse.in { display: block!important; margin-top: 0px; } – Mavis Apr 03 '14 at 10:15
This helped me since I am way past the point of re-compiling the bootstrap core CSS with a different variable. Thanks! – Amir5000 Apr 23 '14 at 19:30
Had to remove margin: 7.5px -15px; to get texts with carets working – Toni Aug 05 '14 at 09:22
4

What I like about this is that if I upgrade Bootstrap, I don't need to worry about finding the variable and recompiling it. – ScubaSteve Aug 07 '14 at 18:28
1

@Seb33300 dropdown in nav still using normal dropdown, not sliding down like in mobile nav. – skycrew Aug 22 '14 at 10:24
Thanks for sharing. I used your solution in another post: http://stackoverflow.com/questions/25588388/increase-bootstraps-navbar-collapse-breakpoint-without-affecting-another-navbar – curious1 Aug 31 '14 at 14:04
Thanks for sharing indeed. This was what I was looking for. A CSS solution that doesnt require tweaking in the min file – Dorvalla Sep 10 '14 at 11:08
6

but the dropdowns were still in desktop mode, I had to edit code on line 3934 to max-with: 992 (in bootstrap.css), I am using bootstrap 3.2. Just in case someone need this. – chandan Sep 24 '14 at 20:36
This works great, but it doesn't seem to work when trying to make the breakpoint smaller than 768px. Is there a solution? – Vin Jan 24 '15 at 03:24
Thanks! worked perfectly. I did remove 'margin: 7.5px -15px;' however. – dbrin Mar 02 '15 at 18:23
4

This doesn't seem to handle `dropdown-menu` items in the nav bar. – alexw Apr 10 '15 at 02:29
1

If you happen to be using .nav-justified on the navbar, you'll need this override as well: .nav-justified > li { display: block!important; width: auto; } – Robert Waddell Jun 30 '15 at 21:05
I generally do not post these kind of comments. But... after two days of searching and trying hundreds of things, this FINALLY worked! THANK YOU! – BritishSteel Oct 29 '15 at 14:40
What is .in do? I couldn't find the class in the bootstrap class list here: https://gist.github.com/geksilla/6543145 – munchschair Apr 20 '16 at 01:49
1

@munchschair lines 3482 and 4194 https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css it's when responsive menu is opening. – Seb33300 Apr 20 '16 at 08:11
2

For adjusting the dropdown width add: `.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; }` inside above media-query. For more info: http://stackoverflow.com/a/28659861/1360694 – Siddharth Trikha Oct 01 '16 at 12:25
I had to go to navbar.less and delete `&.collapse` inside `@media (min-width: @grid-float-breakpoint)` – Cr1xus Jul 13 '17 at 09:09
had to add this part to a jekyll template I was using for personal portfolio website. – pegasuspect Jul 29 '20 at 13:27

score 142 · Answer 2 · edited Dec 24 '22 at 09:16

The big difference between Bootstrap 2 and Bootstrap 3 is that Bootstrap 3 is "mobile first".

That means the default styles are designed for mobile devices and in the case of Navbars, that means it's "collapsed" by default and "expands" when it reaches a certain minimum size.

Bootstrap 3's site actually has a "hint" as to what to do: http://getbootstrap.com/components/#navbar

Customize the collapsing point

Depending on the content in your navbar, you might need to change the point at which your navbar switches between collapsed and horizontal mode. Customize the @grid-float-breakpoint variable or add your own media query.

If you're going to re-compile your LESS, you'll find the noted LESS variable in the variables.less file. It's currently set to "expand" @media (min-width: 768px) which is a "small screen" (ie. a tablet) by Bootstrap 3 terms.

@grid-float-breakpoint: @screen-tablet;

If you want to keep the collapsed a little longer you can adjust it like such:

@grid-float-breakpoint: @screen-desktop; (992px break-point)

or expand sooner

@grid-float-breakpoint: @screen-phone (480px break-point)

If you want to have it expand later, and not deal with re-compiling the LESS, you'll have to overwrite the styles that get applied at the 768px media query and have them return to the previous value. Then re-add them at the appropriate time.

I'm not sure if there's a better way to do it. Recompiling the Bootstrap LESS to your needs is the best (easiest) way. Otherwise, you'll have to find all the CSS media queries that affect your Navbar, overwrite them to default styles @ the 768px width and then revert them back at a higher min-width.

Recompiling the LESS will do all that magic for you just by changing the variable. Which is pretty much the point of LESS/SASS pre-compilers. =)

(note, I did look them all up, it's about 100 lines of code, which is annoy enough for me to drop the idea and just re-compile Bootstrap for a given project and avoid messing something up by accident)

what's the difference between bootstrap default and customized versions? Their folder structures are quite different and the customized version one has only the the CSS and JS files wehre as the default version has a lot of folders including LESS. I am confused somewhat. — Rahul Patwa, Sep 15 '13 at 00:31
@RahulPatwa If you download the full Bootstrap 3 Zip, you're going to get all the development files along with it. These are the files people use to continue to develop Bootstrap and include things like Composer and Grunt work files, git system files, the LESS files, etc. The full files are located in the /dist folder. You'll see folders for `/css`, `/js`, `/fonts`. Customizing it just gives the compiled files you selected. — jmbertucci, Sep 16 '13 at 14:41
so if i download full bootstrap and then make some changes in less variables.. How do I compile that back into CSS file? — Rahul Patwa, Sep 16 '13 at 21:47
@RahulPatwa There's multiple ways to compile LESS. The [LESS website](http://lesscss.org/#synopsis) explains how from both a client and server side method. [Crunch](http://crunchapp.net/) is a simple GUI you can use. Bootstrap's website specifically recommends using their [RECESS tool](http://twitter.github.io/recess/). [And there's more](http://twitter.github.io/recess/). — jmbertucci, Sep 16 '13 at 22:51
The easiest way is just to go to http://getbootstrap.com/customize/ redefine the \@grid-float-breakpoint value for something hardcoded (e.g. 520px) or for a smaller screen size like \@screen-xs-min — neves, Nov 29 '13 at 04:21

score 34 · Answer 3 · answered Aug 28 '13 at 14:54

34

Easiest way is to customize bootstrap

find variable:

 @grid-float-breakpoint

which is set to @screen-sm, you can change it according to your needs. Hope it helps!

answered Aug 28 '13 at 14:54

mshahbazm

611
1
11
23

2

Setting this to a very small value e.g 1px will disable the navbar collapsing (e.g. if you want a non-responsive navbar). – Gregor Slavec Aug 06 '14 at 12:27
I have also set this to '@screen-xs-min' to limit the collapsed menu to 480px. For some sites this works well and creates a nice effect where you can easily change from a full menu to a collapsed one on the iPhone by changing the orientation. – chiappa Oct 26 '16 at 09:15

score 20 · Answer 4 · answered Feb 26 '14 at 18:07

these are controlled in variables, no need to muck around in source. with bootstrap, try variables first, then overrides. then go back and try variables again ;)

i used bootstrap-sass with rails, but it's the same with the default LESS.

FILE: main.css.scss
-------------------

// control the screen sizes
$screen-xs-min: 300px;
$screen-sm-min: 400px;
$screen-md-min: 800px;
$screen-lg-min: 1200px;

// this tells which screen size to use to start breaking on
// will tell navbar when to collapse
$grid-float-breakpoint: $screen-md-min;

// then import your bootstrap
@import "bootstrap";

that's it! this variables reference page is super handy: https://github.com/twbs/bootstrap/blob/master/less/variables.less

score 10 · Answer 5 · answered Mar 14 '14 at 09:03

Thanks to Seb33300 I got this working. However, an important part seems to be missing. At least in Bootstrap version 3.1.1.

My problem was that the navbar collapsed accordingly at the correct width, but the menu button didn't work. I couldn't expand and collapse the menu.

This is because the collapse.in class is overrided by the !important in .navbar-collapse.collapse, and can be solved by also adding the "collapse.in". Seb33300's example completed below:

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

prefect standard css solution for bootstrap 3.3.6, thanks ! – xxxbence Nov 09 '16 at 21:08 — xxxbence, Nov 09 '16 at 21:08

score 7 · Answer 6 · edited Jan 08 '14 at 14:24

I wanted to upvote and comment on jmbertucci's answer, but I'm not yet to be trusted with the controls. I had the same issue and resolved it as he said. If you are using Bootstrap 3.0, edit the LESS variables in variables.less The responsive break points are set around line 200:

@screen-xs:                  480px;
@screen-phone:               @screen-xs;

// Small screen / tablet
@screen-sm:                  768px;
@screen-tablet:              @screen-sm;

// Medium screen / desktop
@screen-md:                  992px;
@screen-desktop:             @screen-md;

// Large screen / wide desktop
@screen-lg:                  1200px;
@screen-lg-desktop:          @screen-lg;

// So media queries don't overlap when required, provide a maximum
@screen-xs-max:              (@screen-sm - 1);
@screen-sm-max:              (@screen-md - 1);
@screen-md-max:              (@screen-lg - 1);

Then set the collapse value for the navbar using the @grid-float-breakpoint variable at about line 232. By default it's set to @screen-tablet . If you want you can use a pixel value, but I prefer to use the LESS variables.

note that the sizes are now deprecated, and all that remains are the `-min` ones: @screen-md-min: 800px; @screen-lg-min: 1200px; @grid-float-breakpoint: @screen-md-min; — Doug Lee, Feb 27 '14 at 03:24

score 7 · Answer 7 · answered Jun 18 '14 at 02:51

If the problem you face is the menu breaking into multiple lines, you can try one of the following:

1) Try to reduce the number of menu items or their length, like removing menu items or shortening the words.

2) Reducing the padding between the menu items, like this:

.navbar .nav > li > a {
padding: 10px 15px 10px; /* Change here the second value for padding-left and padding right */
}

Default padding is 15px both sides (left and right).

If you prefer to change each individual side use:

padding-left: 7px; 
padding-right: 8px;

This setting affects the dropdown list too.

This doesn't answer the question but it could help others who don't want to mess with the CSS or using LESS variables. The two common approaches to solve this problem.

score 3 · Answer 8 · answered Sep 22 '13 at 13:11

The nabvar will collapse on small devices. The point of collapsing is defined by @grid-float-breakpoint in variables. By default this will by before 768px. For screens below the 768 pixels screen width, the navbar will look like:

enter image description here

It's possible to change the @grid-float-breakpoint in variables.less and recompile Bootstrap. When doing this you also will have to change @screen-xs-max in navbar.less. You will have to set this value to your new @grid-float-breakpoint -1. See also: https://github.com/twbs/bootstrap/pull/10465. This is needed to change navbar forms and dropdowns at the @grid-float-breakpoint to their mobile version too.

How do you use stylus? Do you use https://github.com/Acquisio/bootstrap-stylus. In the last case you should do the same as above. Download bootstrap-styles, change the setting in stylus/variables.styl etc. and recompile. — Bass Jobsen, Nov 13 '13 at 20:26

cdonner · Answer 9 · 2014-05-21T15:01:14.490

I am concerned about maintenance and upgrade problems down the road from customizing Bootstrap. I can document the customization steps today and hope that the person upgrading Bootstrap three years from now will find the documentation and reapply the steps (that may or may not work at that point). An argument can be made either way, I suppose, but I prefer keeping any customizations in my code.

I don't quite understand how Seb33300's approach can work, though. It certainly did not work with Bootstrap 4.0.3. For the nav bar to expand at 1200 instead of 768, rules for both media queries must be overridden to prevent expanding at 768 and force expanding at 1200.

I have a longer menu that would wrap on the iPad in Portrait mode. The following keeps the menu collapsed until the 1200 breakpoint:

@media (min-width: 768px) {
    .navbar-header {
        float: none; }
    .navbar-toggle {
        display: block; }
    .navbar-fixed-top .navbar-collapse, 
    .navbar-static-top .navbar-collapse, 
    .navbar-fixed-bottom .navbar-collapse {
        padding-right: 15px;
        padding-left: 15px; }
    .navbar-collapse.collapse {
        display: none !important; }
        .navbar-collapse.collapse.in { 
        display: block!important; 
        margin-top: 0px; }
}
@media (min-width: 1200px) {
    .navbar-header {
        float: left; }
    .navbar-toggle {
    display: none; }
    .navbar-fixed-top .navbar-collapse, 
    .navbar-static-top .navbar-collapse, 
    .navbar-fixed-bottom .navbar-collapse {
        display: block !important; }
}

score 1 · Answer 10 · edited Apr 03 '16 at 19:53

I did the CSS way with my install of Bootstrap 3.0.0, since I am not that familiar with LESS. Here is the code that I added to my custom css file (which I load after bootstrap.css) which allowed me to control so the menu was always working like an accordion.
Note: I wrapped my whole navbar inside a div with the class sidebar to separate out the behavior I wanted so it did not affect other navbars on my site, like the main menu. Adjust along your needs, hope it is of help.

/* Sidebar Menu Fix */

.sidebar .navbar-nav {
  margin: 7.5px -15px;
}
.sidebar .navbar-nav > li > a {
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 20px;
}
.sidebar .navbar-collapse {
  max-height: 500px;
}
.sidebar .navbar-nav .open .dropdown-menu {
  position: static;
  float: none;
  width: auto;
  margin-top: 0;
  background-color: transparent;
  border: 0;
  box-shadow: none;
}
.sidebar .dropdown-menu > li > a {
  color: #777777;
}
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
  color: #333333;
  background-color: transparent;
}
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
.sidebar .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
  color: #555555;
  background-color: #e7e7e7;
}
.sidebar .navbar-nav {
  float: none;
}
.sidebar .navbar-nav > li {
  float: none;
}

Additional note: I also added a change to the toggle of the main menu navbar (since the code above on my site is used for a "submenu" on the side.

I changed:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

into:

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-topmenu">

And then also adjusted:

<div class="navbar-collapse collapse navbar-collapse">

into:

<div class="navbar-collapse collapse navbar-collapse-topmenu">

If you will only have one navbar I guess you will not need to worry about this, but it helped me in my case.

score 0 · Answer 11 · answered Jan 25 '14 at 12:58

And for those who want to collapse at a width less than the standard 768px (expand at a width less than 768px), this is the css needed:

@media (min-width: 600px) {
.navbar-header {
        float: left;
}
.navbar-toggle {
    display: none;
}
.navbar-collapse {
    border-top: 0 none;
    box-shadow: none;
    width: auto;
}
.navbar-collapse.collapse {
    display: block !important;
    height: auto !important;
    padding-bottom: 0;
    overflow: visible !important;
}
.navbar-nav {
    float: left !important;
    margin: 0;
}
.navbar-nav>li {
    float: left;
}
.navbar-nav>li>a {
    padding-top: 15px;
    padding-bottom: 15px;
}
}

score 0 · Answer 12 · answered Feb 03 '14 at 12:10

I think I found a simple solution to changing the collapse breakpoint, only through css.

I hope others can confirm it since I didn't test it thoroughly and I'm not sure if there are side effects to this solution.

You have to change the media query values for the following class definitions:

@media (min-width: BREAKPOINT px ){
    .navbar-toggle{display:none}
}

@media (min-width: BREAKPOINT px){
    .navbar-collapse{
        width:auto;
        border-top:0;box-shadow:none
    }
    .navbar-collapse.collapse{
        display:block!important;height:auto!important;padding-bottom:0;overflow:visible!important
    }
    .navbar-collapse.in{
        overflow-y:visible
   }
   .navbar-fixed-top .navbar-collapse,.navbar-static-top .navbar-collapse,.navbar-fixed-bottom .navbar-collapse{
        padding-left:0;padding-right:0
    }
}

This is what worked for me on my current project, but I still need to change some css definitions to arrange the menu properly for all screen sizes.

Hope this helps.

Bootstrap 3 Navbar Collapse

12 Answers12

Linked

Related