Change bootstrap navbar collapse breakpoint without using LESS

Question

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

User · Answer

It s now supported on Bootstrap 4 4  navbar-expand-sm

User · Answer

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

User · Answer

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

User · Answer

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  gt  li       float  left         navbar-nav  gt  li  gt  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

User · Answer

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 gt li gt 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 gt 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

User · Answer

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  amp  Replace is your best friend right in the css version

User · Answer

2018 UPDATE  Bootstrap 4  Changing the navbar breakpoint is easier in Bootstrap 4 using the navbar-expand-  classes    lt nav class  navbar fixed-top navbar-expand-sm  gt    lt  nav gt    navbar-expand-sm   mobile menu on xs screens  lt 576px navbar-expand-md   mobile menu on sm screens  lt 768px navbar-expand-lg   mobile menu on md screens  lt 992px navbar-expand-xl   mobile menu on lg screens  lt 1200px navbar-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  navbar-nav  nav-link           padding-right   5rem          padding-left   5rem             navbar-expand-custom  navbar-collapse           display  flex important             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 gt li         float  none         navbar-nav gt li gt a         padding-top  10px        padding-bottom  10px         collapse in        display block  important          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

User · Answer

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  gt   container     navbar-expand-lg  gt   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  gt   container       navbar-expand-lg  gt   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  gt   container       navbar-expand-lg  gt   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

User · Answer

Here my working code using in React with Bootstrap   lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  integrity  sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz K68vbdEjh4u      crossorigin  anonymous  gt   lt style gt     media  min-width  768px  and  max-width  1000px        navbar-collapse collapse          display  none  important           navbar-toggle          display  block  important           navbar-header          float  none            lt  style gt

User · Answer

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  gt  li  gt  a               line-height  20px                     navbar-nav  open  dropdown-menu  gt  li  gt  a           navbar-nav  open  dropdown-menu  dropdown-header               padding  5px 15px 5px 25px                     dropdown-menu  gt  li  gt  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 gt li               float  none                     navbar-nav gt li gt 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                    demo code

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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 gt li             float  none                 navbar-nav gt li gt 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

User · Answer

in bootstrap3  change this variable  grid-float-breakpoint to the one you need  The default value is 768px

User · Answer

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     lt nav class  navbar navbar-expand-lg  gt  lt  nav gt    Mobile menu is showing in large screen   Reference    https   getbootstrap com docs 4 0 components navbar

User · Answer

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 gt 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

[css] Change bootstrap navbar collapse breakpoint without using LESS

Examples related to css

Examples related to twitter-bootstrap

Examples related to responsive-design

Examples related to navbar

Examples related to collapse