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: Bootstrap 3 Navbar Collapse
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!
Best Answer
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 menuIf you exclude
navbar-expand-*
the mobile menu will be used atall
widths. Here's a demo of all 6 navbar states: Bootstrap 4 Navbar ExampleYou can also use a custom breakpoint (???px) by adding a little CSS. For example, here's 1300px..
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...Working example for 991px: http://www.bootply.com/j7XJuaE5v6
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.