Bootstrap: How to collapse navbar earlier

Question

I want to collapse my navbar in earlier resolution than 768px, for example 992px, how would I do that? thanks! (I know I can customize it on the bootstrap page, but I don't want to start my project over again with new bootstrap.css file)

Answer 1

If you don't want to manipulate Bootstrap by using Less/Sass (maybe because you want to load it via a CDN), this is what did the trick for me:

@media (min-width: 768px) and (max-width: 991px) {     .navbar-collapse.collapse {         display: none !important;     }     .navbar-collapse.collapse.in {         display: block !important;     }     .navbar-header .collapse, .navbar-toggle {         display:block !important;     }     .navbar-header {         float:none;     } } 

Demo: https://jsfiddle.net/0pmy8usr/

Add this in a separate CSS file and include it after bootstrap.css

UPDATE for Bootstrap 4:

@media(max-width:900px) {   .navbar .navbar-brand {float:none;display: inline-block;}   .navbar .navbar-nav>.nav-item { float: none; margin-left: .1rem;}   .navbar .navbar-nav {float:none !important;}   .nav-item{width:100%;text-align:left;}    .navbar-toggler {display: block !important;}   .navbar-toggleable-sm.collapse {display:none !important}   .navbar-toggleable-sm.collapse.in {display:block !important} } 

Demo: https://jsfiddle.net/mkvhbgnp/3/