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!

Solution 1

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 2

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 <576px
• navbar-expand-md = mobile menu on sm screens <768px
• navbar-expand-lg = mobile menu on md screens <992px
• navbar-expand-xl = mobile menu on lg screens <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 .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

---

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

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

Solution 4

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

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;

View more solutions

Comments

[Nearpoint]

So for the search & replace option, does that mean edit the bootstrap.css media queries directly? Can I change a media query that only applies to the navbar? I was told it is not a good idea to edit the source bootstrap files, but I don't know why, what do you think?

[Nearpoint]

Currently the navbar collapses when the width is below 768px. But I want the navbar to collapse when the width is below 1000px. For this, wouldn't you need to show .collapse between 768 and 1000?

[SaurabhLP]

yes, collapse class is important for mobile screen so that if width is below 768px the navbar will be display:none, so the required action would be applied inside 768 and 1000 mark...

[Daniele Ricci]

this doesn't work on Bootstrap 3 because there is another rule navbar-collapse.collapse which has display: block !important. Disabling that will result in the collapse button not appearing... so I guess it's a lot of classes that needs to be redefined, not just collapse

[henrywright]

Note the line number you quoted will be different if you've used the Customizer: getbootstrap.com/customize

[cvng]

Just changed the @grid-float-breakpoint in my responsive.less works for me!

[Zim]

Yes, a bunch of Bootstrap classes must be overridden in the custom media query: bootply.com/120604

[e.thompsy]

Can you post an example, please?

[craftsman]

It doesn't show collapsed menu button when width is anywhere between 768px to 1000px.

[Aniket Suryavanshi]

@craftsman : For the button, use this: .navbar-toggle { display: block !important; } .navbar-header { width: 100%; height: 60px; }

[behzad]

still does not show the content inside the hamburger menu

[Ivanka Todorova]

You should override that in another CSS file instead of changing the bootstrap css files directly.

[AnthonyR]

How to rebuild ? I tried this command line : $ lessc bootstrap.less bootstrap.css but nothing happened

[Gone Coding]

@AnthonyRn: I have no idea what your project setup is. I simply updated the Bootstrap LESS source in my VS 2013 project and it rebuilt on save. perhaps you should ask a new question?

[AnthonyR]

My problem was solved by using the online customizer tool of Bootstrap here getbootstrap.com/customize Thank you for the solution !

[Makis K.]

Keep in mind that if you are using sass and you don't want to replace the vendor code (you shouldn't), you have to include the file that contains the variable with your custom value before the bootstrap sass files. The reason being is all of Bootstrap’s variables are set to default! values, so we need to override these values by importing our variables first.

[Matt Clark]

Please add an example of how to do this... I am new to bootstrap, and grep reveals 0 instances of this variable in my project.

[rybo111]

@MattClark @grid-float-breakpoint is defined on the compiler: getbootstrap.com/customize - the default value is @screen-sm-min but you can change it to 1234px.

[rpalzona]

First Visit :[link]( getbootstrap.com/customize Locate : ‘Less variables’ –> ‘Media queries breakpoints’ Change : @ screen-lg value from 1200px to 1920px Locate : “Grid system” –> @ grid-float-breakpoint Change : @ screen-sm-min to @ screen-lg Scroll to end of page. Click on “Compile and Download” Extract and use these downloaded files.

[rpalzona]

Try this First Visit :[link]( getbootstrap.com/customize Locate : ‘Less variables’ –> ‘Media queries breakpoints’ Change : @ screen-lg value from 1200px to 1920px Locate : “Grid system” –> @ grid-float-breakpoint Change : @ screen-sm-min to @ screen-lg Scroll to end of page. Click on “Compile and Download” Extract and use these downloaded files.

[Serge Melis]

I think this should be the accepted answer, as it uses Bootstraps own methods for defining the breakpoint. As an example, I was able to simple 'rebuild' bootstrap, and have the desired result by setting this variable to what I needed to be the breakpoint.

[jduhls]

I have many items in my navbar. I had to also add "overflow: scroll!important;" to ".collapse.in{}" definition. In bootstrap "max-height: 340px;"

[Chris Richards]

This above code works when I set a value higher than 768px, however I need to achieve the reverse... I only want it to collapse for example at 400px, but when I set this value, bootstrap seems to be picking up the original 768 - Any ideas? Thanks

[Mike O'Connor]

With your solution and the one by Veek I'm finding that between 768 and 1000 the margins expand, improperly. They are fine outside those limits. With your solution the icon for the collapsed menu also does not stay on the right after collapsing but presses up against the "brand".

[Mike O'Connor]

So sorry, I apparently goofed. I do still have that problem of the inappropriately-wide margins appearing inside those limits. However I see now that an official online bootstrap example exhibits the same margins problem, natively.

[nerdwaller]

In the current alpha, seems to only go to navbar-toggleable-sm for me, xs makes it never toggle. Could be me doing something wrong. Thanks!

[Mirko]

I would add a float:none!important to .navbar-text as well if you are using it .navbar-left, .navbar-right, .navbar-text { float: none !important; }

[Abhishek Pandey]

Although this answer works like charm, but it's messing with dropdown menu, maybe you need to improve answer.

[Radmation]

@AnthonyR To Rebuild you use the grunt command grunt dist which will regenreate the dist directory. You will run that command from the directory where you have your gruntfile.js. Reference: getbootstrap.com/getting-started/#grunt

[whitneyland]

@nerdwaller looks like you're right, made an edit from xs to sm.

[M H]

Haha who the hell built bootstrap? Didn't think we would need to change that little detail?

[cbuchart]

@AbhishekPandey I've found useful this answer (part regarding dropdown)

[Sascha]

This worked for me. The only exception is the minimum pixel width should be 1000px in your sample above.

[Volomike]

Doesn't work completely. The menu items it displays are not vertical, but horizontal.

[Sam Bruton Developer]

Yes, this one works for me exactly as I needed. Of course, if you need more specific breakpoint's, then configuring your own media query will be necessary (hence the favourable answer to this question)

[Sam Bruton Developer]

Yes correct, but you would need navbar-expand-lg to collapse the nav on large screens

[BBQ Singular]

This solution almost worked perfectly for me. I had to add a rule for the dropdown menu as noted by others. In the parlance of the example for Bootstrap 4 above: .navbar-expand-custom .navbar-nav .dropdown-menu { position: absolute; }

[LauraEld]

Zim, in your code you forgot this to avoid overflow when there are to many list items: .navbar-collapse.in { overflow-y: auto !important; }

[kevin walker]

This was exactly what I needed. Thank you!