Changing the point at which Bootstrap Nav menus will collapse

Use the following code in your SCSS file that will allow you to change the max width at which a menu item is allowed to collapse. There is no need to edit the core bootstrap files. Place code in

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