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 app

Answer 1

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

Answer 2

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.

Answer 3

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

Answer 4

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:

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.

Answer 5

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

Answer 6

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)

I hope that helps!

Cheers!