Bootstrap navbar collapse media-query on custom width - css

Question

Helo guys, I want to modify the navbar in order to collapse on #screen-md :992px;.
I have modified navbar.less, but still not working and I don't know what to do.
So how can I modify the #grid-float-breakpoint variable in order to have that menu collapsed on custom media query size?
FIDDLE:

Answer 1

You can change the collapse point in 3.1 like this..
#media (max-width: 992px) {
.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;
}
}
http://www.bootply.com/120951
In Bootstrap 4, changing the breakpoint is easier. See this answer

Answer 2

In variables.less change
#grid-float-breakpoint: #screen-sm-min
to
#grid-float-breakpoint: #screen-md-min;
or to whatever other width you would like.
It's easy and painless done this way.

Answer 3

Here is the code I used to solve this, just add it to your style sheet.
#media (max-width: 1992px) {
.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;
}
}

Answer 4

If you are using Twitter Bootstrap, the responsive collapse is already built in. You may just have to invoke it with a class in your menu. But this is the css I use in most of the Bootstrap applications I've worked with, including the one I working in right now
#media(min-width:768px) {
.navbar-collapse {
width: auto;
/* more code here */
}
change the min width to the width you want it to collapse from.