I am attempting to workout how to modify the collapse width of the navbar within Bootstrap 3 so that it will collapse at an earlier width. I have found several suggestions but none seem to work. The closest I got was the code from this post Twitter Bootstrap 3 navbar-collapse - set width to collapse
Here's what that post used:
@media (max-width: 1280px) {
.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;
}
}
This causes the collapse to happen when I want it however, it breaks the collapse at the same time. The collapse button appears when it's supposed to however when I click on it the menu appears for just a second and then automatically closes. Is there a way to stop the auto close?
There is a very easy way do do this,
@grid-float-breakpoint
to the size of your choice For Bootstrap 3.1, the navbar changed slightly from 3.0, so there are some changes to the CSS you'd use to override the breakpoint..
@media (max-width: 1200px) {
.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;
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.