Change the Bootstrap 4 navbar collapse with navbar-toggleable-* classes

Why might I want to change it?

Well simple, every site is different and you might have too many menu items in your navbar to fit in the standard breakpoint leading to your menu items stacking on top of each other or jumping below the logo, yuk!

So what's new with the Bootstrap 4 navbar breakpoints?

Bootstrap 3 made it very hard to adjust the navbar breakpoint even if you coded it into your CSS you had to override multiple elements and maybe even use the dreaded !important tag :) Now in Bootstrap 4 it's much easy to adjust your Bootstrap navbar breakpoint with the new built in CSS classes, here's how:

Introducing navbar-toggleable-* classes

Introducing the new super classes for Bootstrap 4 navbars:

• navbar-toggleable-xs
• navbar-toggleable-sm
• navbar-toggleable-md

These new classes can be added to your navbar .collapse element to control when your mobile menu becomes the desktop menu (remember Bootstrap is mobile first).

Combining navbar-toggleable-* with .navbar-toggler

These combined with the visibility utilities (hidden-*-up/down) on your .navbar-toggler element (previously called .navbar-toggle in Bootstrap 3) allow you to easily alter when the mobile menu toggler (hamburger menu) is visible or not.

It's important you make sure the hidden--up/down class your .navbar-toggler element has corresponds with the related navbar-toggleable- class you are using otherwise your mobile menu toggler might show when it shouldn't. The .navbar-toggler should use the next breakpoint up from the navbar-toggleable-* element ie. navbar-toggleable-xs + hidden-sm-up. The right combinations are shown below.

• Navbar XS: navbar-toggleable-xs + hidden-sm-up = desktop menu shows at greater than 544px screenwidth
• Navbar SM: navbar-toggleable-sm + hidden-md-up = desktop menu shows at greater than 768px screenwidth
• Navbar MD: navbar-toggleable-md + hidden-lg-up = desktop menu shows at greater than 992px screenwidth

Examples

And here's the full HTML markup for each (click on the titles to see working examples):

Navbar XS

Result: navbar-toggleable-xs + hidden-sm-up = desktop menu shows at greater than 544px screenwidth

<nav class="navbar navbar-light bg-faded">
  <div class="navbar-header">
     <a class="navbar-brand" href="http://bootbites.com">Navbar XS</a>
  </div> 
  <button class="navbar-toggler hidden-sm-up pull-xs-right" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar">
    &#9776;
  </button>
  <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar">
    <ul class="nav navbar-nav pull-xs-right">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
    </ul>
  </div>
</nav>

Navbar SM

Result: navbar-toggleable-sm + hidden-md-up = desktop menu shows at greater than 768px screenwidth

<nav class="navbar navbar-light bg-faded">
  <div class="navbar-header">
     <a class="navbar-brand" href="http://bootbites.com">Navbar SM</a>
  </div> 
  <button class="navbar-toggler hidden-md-up pull-xs-right" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar">
    &#9776;
  </button>
  <div class="collapse navbar-toggleable-sm" id="exCollapsingNavbar">
    <ul class="nav navbar-nav pull-sm-right">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
    </ul>
  </div>
</nav>

Navbar MD

Result: navbar-toggleable-md + hidden-lg-up = desktop menu shows at at greater than 992px screenwidth

<nav class="navbar navbar-light bg-faded">
  <div class="navbar-header">
     <a class="navbar-brand" href="http://bootbites.com">Navbar MD</a>
  </div> 
  <button class="navbar-toggler hidden-lg-up pull-xs-right" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar">
    &#9776;
  </button>
  <div class="collapse navbar-toggleable-md" id="exCollapsingNavbar">
    <ul class="nav navbar-nav pull-md-right">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
    </ul>
  </div>
</nav>

NOTE: Due to this navbar bug we've implemented our own fix to make navbar items stack rather than float when the navbar is collapsed.

Sum up

If you're found this tutorial useful please share it on Facebook & Stackoverflow as well as Like our Facebook page.

If your prefer to use CSS to alter the breakpoints we'll be covering that next week, sign up to the newsletter or Like our Facebook page to stay up-to-date.