Change bootstrap navbar collapse breakpoint without using LESS
CssTwitter BootstrapResponsive DesignNavbarCollapseCss Problem Overview
Currently when the browser width drops below 768px, the navbar changes to collapsed mode. I want to change this width to 1000px so when the browser is below 1000px the navbar changes to collapsed mode. I want to do this without using LESS, I am using stylus not LESS.
My issue is the same as in this question: https://stackoverflow.com/questions/18192082/bootstrap-3-navbar-collapse?lq=1
But all the answers in that questions explain how to do it by changing LESS variable. I haven't been dealing with LESS, I am using stylus so I want to know how this can be done using stylus or another method.
Thanks!
Css Solutions
Solution 1 - Css
2018 UPDATE
Bootstrap 4
Changing the navbar breakpoint is easier in Bootstrap 4 using the navbar-expand-*
classes:
<nav class="navbar fixed-top navbar-expand-sm">..</nav>
navbar-expand-sm
= mobile menu on xs screens <576pxnavbar-expand-md
= mobile menu on sm screens <768pxnavbar-expand-lg
= mobile menu on md screens <992pxnavbar-expand-xl
= mobile menu on lg screens <1200pxnavbar-expand
= never use mobile menu(no expand class)
= always use mobile menu
If you exclude navbar-expand-*
the mobile menu will be used at all
widths. Here's a demo of all 6 navbar states: Bootstrap 4 Navbar Example
You can also use a custom breakpoint (???px) by adding a little CSS. For example, here's 1300px..
@media (min-width: 1300px){
.navbar-expand-custom {
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
}
.navbar-expand-custom .navbar-nav {
flex-direction: row;
}
.navbar-expand-custom .dropdown-menu {
position: absolute;
}
.navbar-expand-custom .nav-link {
padding-right: .5rem;
padding-left: .5rem;
}
.navbar-expand-custom > .container {
flex-wrap: nowrap;
}
.navbar-expand-custom .navbar-collapse {
display: flex!important;
flex-basis: auto;
}
.navbar-expand-custom .navbar-toggler {
display: none;
}
}
Bootstrap 4 Custom Navbar Breakpoint
Bootstrap 4 Navbar Breakpoint Examples
Bootstrap 3
For Bootstrap 3.3.x, here is the working CSS to override the navbar breakpoint. Change 991px
to the pixel dimension of the point at which you want the navbar to collapse...
@media (max-width: 991px) {
.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;
}
}
Working example for 991px: http://www.bootply.com/j7XJuaE5v6<br>
Working example for 1200px: https://www.codeply.com/go/VsYaOLzfb4 (with search form)
Note: The above works for anything over 768px. If you need to change it to less than 768px the example of less than 768px is here.
Solution 2 - Css
You have to write a specific media query for this, from your question, below 768px, the navbar will collapse, so apply it above 768px and below 1000px, just like that:
@media (min-width: 768px) and (max-width: 1000px) {
.collapse {
display: none !important;
}
}
This will hide the navbar collapse until the default occurrence of the bootstrap unit. As the collapse class flips the inner assets inside navbar collapse will be automatically hidden, like wise you have to set your css as you desired design.
Solution 3 - Css
in bootstrap3, change this variable @grid-float-breakpoint to the one you need. The default value is 768px
Solution 4 - Css
Finally worked out how to change the collapse width by fiddling with '@grid-float-breakpoint' at http://getbootstrap.com/customize/.
Go to line 2923 in bootstrap.css(also min version) and change @media screen and (min-width: 768px) {
to @media screen and (min-width: 1000px) {
So the code will end up being:
@media screen and (min-width: 1000px) {
.navbar-brand {
float: left;
margin-right: 5px;
margin-left: -15px;
}
.navbar-nav {
float: left;
margin-top: 0;
margin-bottom: 0;
}
.navbar-nav > li {
float: left;
}
.navbar-nav > li > a {
border-radius: 0;
}
.navbar-nav.pull-right {
float: right;
width: auto;
}
.navbar-toggle {
position: relative;
top: auto;
left: auto;
display: none;
}
.nav-collapse.collapse {
display: block !important;
height: auto !important;
overflow: visible !important;
}
}
Solution 5 - Css
I just did this successfully by using the following CSS code.
@media(max-width:1000px) {
.navbar-collapse.collapse {
display: none !important;
}
.navbar-collapse {
overflow-x: visible !important;
}
.navbar-collapse.in {
overflow-y: auto !important;
}
.collapse.in {
display: block !important;
}
}
Solution 6 - Css
In the Bootstrap 3 .LESS source code, there is a variable defined in variables.less
called @grid-float-breakpoint
which has the following helpful comment:
//**Point at which the navbar becomes uncollapsed
@grid-float-breakpoint: @screen-sm-min;
The matching @grid-float-breakpoint-max
value is set to that minus 1px:
//**Point at which the navbar begins collapsing
@grid-float-breakpoint-max: (@grid-float-breakpoint-max - 1);
Solution:
So just set the @grid-float-breakpoint
value to 1000px instead and rebuild bootstrap.less
into bootstrap.css
:
e.g.
@grid-float-breakpoint: 1000px;
Solution 7 - Css
The Sass way of changing bootstrap variables is actually documented on the bootstrap-sass github page.
Just redefine the variables before you @import bootstrap:
$grid-float-breakpoint: 1000px;
@import 'bootstrap';
Solution 8 - Css
In addition to @Skely answer, to make dropdown menus inside the navbar work, also add their classes to be overriden. Final code bellow:
@media (min-width: 768px) and (max-width: 991px) {
.navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.navbar-nav .open .dropdown-menu > li > a {
line-height: 20px;
}
.navbar-nav .open .dropdown-menu > li > a,
.navbar-nav .open .dropdown-menu .dropdown-header {
padding: 5px 15px 5px 25px;
}
.dropdown-menu > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
}
.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;*/
margin: 7.5px 50px 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;
}
}
Solution 9 - Css
Navbars can utilize .navbar-toggler, .navbar-collapse, and .navbar-expand{-sm|-md|-lg|-xl} classes to change when their content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.
For navbars that never collapse, add the .navbar-expand class on the navbar. For navbars that always collapse, don’t add any .navbar-expand class.
For example :
<nav class="navbar navbar-expand-lg"></nav>
Mobile menu is showing in large screen.
Reference : https://getbootstrap.com/docs/4.0/components/navbar/
Solution 10 - Css
In bootstrap v4, the navigation can be collapsed sooner or later using different css classes
eg:
- navbar-toggleable-sm
- navbar-toggleable-md
- navbar-toggleable-lg
With the button for the navigation:
- hidden-sm-up
- hidden-md-up
- hidden-lg-up
Solution 11 - Css
This worked for me Bootstrap3
@media (min-width: 768px) {
.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-collapse.collapse.in {
display: block!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;
}
}
Took a while to figure these two out:
.navbar-collapse.collapse {
display: none!important;
}
.navbar-collapse.collapse.in {
display: block!important;
}
Solution 12 - Css
For Bootstrap 3.3 this is the only code you need:
@media (min-width: 768px) and (max-width: 1000px) {
.navbar-collapse.collapse {
display: none !important;
}
.navbar-toggle{
display: block !important;
}
.navbar-header{
float: none;
}
}
Solution 13 - Css
Your best bet would be to use a port of the CSS processor you use.
I'm a big fan of SASS so I currently use https://github.com/thomas-mcdonald/bootstrap-sass
It looks like there's a fork for Stylus here: https://github.com/Acquisio/bootstrap-stylus
Otherwise, Search & Replace is your best friend right in the css version...
Solution 14 - Css
Hi i think you can do it using CSS like this you can change breakpoint bootstrap menu
@media (max-width: 1200px) {
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
}
.navbar-nav>li {
float: none;
}
.collapse.in{
display:block !important;
}
.navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
}
Solution 15 - Css
This is the working code for me. (Also the dropdown navbar links works)
@media (max-width: 1199px) {
.navbar-nav {
margin: 7.5px -15px;
}
.ul-links {
display: block;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
line-height: 20px;
}
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse.collapse {
display: none!important;
max-height: none;
}
.navbar-nav {
float: none!important;
}
.navbar-nav>li {
float: none;
}
.collapse.in{
display:block !important;
}
.navbar-nav .open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
}
Solution 16 - Css
This is what did the trick for me:
@media only screen and (min-width:769px) and (max-width:1000px){
.navbar-collapse.collapse {
display: none !important;
}
.navbar-collapse.collapse.in {
display: block !important;
}
.navbar-header .collapse, .navbar-toggle {
display:block !important;
}
Solution 17 - Css
In bootstrap 4, if you want to over-ride when navbar-expand-*, expands and collapses and shows and hides the hamburger (navbar-toggler) you have to find that style/definition in bootstrap.css, and redefine it in your own customstyle.css (or directly in bootstrap.css if you are so inclined).
Eg. I wanted the navbar-expand-lg to collapses and shows the navbar-toggler at 950px. In bootstrap.css I find:
@media (max-width: 991.98px) {
.navbar-expand-lg > .container,
.navbar-expand-lg > .container-fluid {
padding-right: 0;
padding-left: 0;
}
}
And below that ...
@media (min-width:992px) {
... lots of styling ...
}
I copied both @media queries and stuck them in my style.css, then modified the size to fit my needs. I my case I wanted it to collapse at 950px. The @media queries must need to be different sizes (I'm guessing), so I set container max-width to 949.98px and used the 950px for the other @media query and so the following code was appended to my style.css. This was not easy to detangle from twisted solutions I found on Stackoverflow and elsewhere. Hope this helps.
@media (max-width: 949.98px) {
.navbar-expand-lg > .container,
.navbar-expand-lg > .container-fluid {
padding-right: 0;
padding-left: 0;
}
}
@media (min-width: 950px) {
.navbar-expand-lg {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.navbar-expand-lg .navbar-nav {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.navbar-expand-lg .navbar-nav .dropdown-menu {
position: absolute;
}
.navbar-expand-lg .navbar-nav .dropdown-menu-right {
right: 0;
left: auto;
}
.navbar-expand-lg .navbar-nav .nav-link {
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.navbar-expand-lg > .container,
.navbar-expand-lg > .container-fluid {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.navbar-expand-lg .navbar-collapse {
display: -webkit-box !important;
display: -ms-flexbox !important;
display: flex !important;
-ms-flex-preferred-size: auto;
flex-basis: auto;
}
.navbar-expand-lg .navbar-toggler {
display: none;
}
.navbar-expand-lg .dropup .dropdown-menu {
top: auto;
bottom: 100%;
}
}
Solution 18 - Css
Here my working code using in React with Bootstrap
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<style>
@media (min-width: 768px) and (max-width: 1000px) {
.navbar-collapse.collapse {
display: none !important;
}
.navbar-toggle{
display: block !important;
}
.navbar-header{
float: none;
}
}
</style>
Solution 19 - Css
It's now supported on Bootstrap 4.4
navbar-expand-sm