Custom Theme Bootstrap

If you have a LESS version of Bootstrap (non-compiled) you need to change the @grid-float-breakpoint variable to 992px to get the navbar to collapse on “Tablet” (Medium) breakpoint. Source:

Changing the collapsed mobile navbar breakpoint

The navbar collapses into its vertical mobile view when the viewport is narrower than @grid-float-breakpoint, and expands into its horizontal non-mobile view when the viewport is at least @grid-float-breakpoint in width. Adjust this variable in the Less source to control when the navbar collapses/expands. The default value is 768px (the smallest “small” or “tablet” screen).

If not, and you’ve only made a couple of changes to Bootstrap, it would be best to download it again via the customiser: http://getbootstrap.com/customize/

Visit the page, search for @grid-float-breakpoint (about half way down the page) and change the value to @screen-md-min (see screenshot). This should then fix the problem for you.

enter image description here


If you’d rather not recompile Bootstrap the only other way would be create an overriding media query and copy all navbar references under the original media query (768px) into it. This isn’t the ideal solution however to ensure that you get everything it would be worth looking for the bootstrap/less/navbar.less file on github (https://github.com/twbs/bootstrap/blob/master/less/navbar.less) Find any instance of @media (min-width: @grid-float-breakpoint) { ... } and that’s the code you need to replace.

@media (min-width: 992px) {
    //All min-width: 768px navbar code
}