Bootstrap 3 CSS3 Tips and Tricks

Change the Bootstrap 3 NavBar Breakpoint

bootstrap 3 Nav breakpoint

A lot of questions relating the the Bootstrap 3 NavBar Breakpoint. 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.

here is the sample CSS code:

@media (max-width:990px){
    
/* Menu BreakPoint */
.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;}
.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;}
/* Menu BreakPoint END */ 
  
}

Written By