Menu
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)
423
To create a collapsible navigation bar, use a button with class="navbar-toggler", data-bs-toggle="collapse" and data-bs-target="#thetarget" .
Wrap both #nabar-mid-collapse and #navbar-rt-collapse in a div with class row-fluid , and apply class col-xs-4 (*or any respective . col class according to the width you need for each item *) to both of them. There is no row-fluid in Bootstrap 3.
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/
187
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With