Change the Bootstrap 4 navbar collapse with SCSS

In last weeks post we covered how to change the Bootstrap 4 navbar breakpoint using the new navbar-toggleable-* classes built into Bootstrap 4 so this week we’ll look at doing the exact thing but using custom SASS/CSS instead.

Why bother with custom code?

The final version of Bootstrap 4 will ship with 5 breakpoints:

  • xs: default ie. 0px viewport width
  • sm: more than 544px viewport width
  • md: more than 768px viewport width
  • lg: more than 992px viewport width
  • xlg: more than 1200px viewport width

With so many breakpoints it’s unlikely that you’re navbar won’t fit into one of them but maybe it won’t or maybe you want to keep your markup lean so want to avoid using too many Bootstrap classes. Whatever the reason you have the opportunity to customise using SCSS or plain CSS.

NOTE: If you want to customise more than your Bootstrap navbar breakpoint then you’ll be better off changing the SCSS breakpoint variables and recompiling Bootstrap complete. Today we’re just focusing on the Bootstrap navbar however and will cover sitewide Bootstrap grid breakpoint customisation in a future post.


Customisation!

 HTML

We’ll use the same markup from the how to change the Bootstrap 4 navbar breakpoint using the new navbar-toggleable-* classes article and then strip out the following classes so we have markup that is free from the Bootstrap 4 responsive utilities.

  • hidden--up or hidden--down
  • navbar-toggleable-*

We’ll also add in a couple more menu items to make our navbar very long and therefore needing to collapse at a relatively width viewport width and add a navbar-custom-breakpoint class to the navbar so we can choice to target a specific navbar rather than targeting them all.

<nav class="navbar navbar-light bg-faded navbar-custom-breakpoint">
  <a class="navbar-brand" href="http://bootbites.com">Navbar Breakpoint Customisation</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar">
    &#9776;
  </button>
  <div class="collapse " id="exCollapsingNavbar">
    <ul class="nav navbar-nav">
      <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="#">Blog</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Press</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Specials</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">More</a>
      </li>
    </ul>
  </div>
</nav>

 

If we load this in the browser now we’ll get a persistent mobile / collapse navbar regardless of the viewport width. Resize the screen and nothing happens so we know the Bootstap 4 responsive utilities are having no effect on our code, great! On to SCSS.


SCSS / CSS

If you’re new to SCSS and don’t want to bother with it you can scroll down a notch to the CSS.

If you do want to bother with SCSS, here’s the SCSS code.

We’ll make the most of Sass by using a width variable called $menu-breakpoint which will be in the viewport/screen width in pixels when the mobile menu should become then desktop menu. We then add some min-width media queries (@media) for our $menu-breakpoint which will:

  • Show/hide the .navbar-toggler & .collapse elements in our Bootstrap navbar.
  • Adjust the point at which navbar items float (NOTE: There’s a Bootstrap bug which this in development)

Start with a low $menu-breakpoint then experiment in the browser by resizing and using the browsers element inspector (right click on the page) find the point at which the menu drops below the logo and that’s your breakpoint. In our example with a container-fluid wrapper element the breakpoint was 940px.

Once you have the code in place, simply adjust the $menu-breakpoint variable as you add or remove menu items, simple!

$menu-breakpoint: 940px;
.navbar-custom-breakpoint {  
  .navbar-toggler {
    float: right;
    
    @media (min-width: $menu-breakpoint) {
      display: none;
    }
  }
  .collapse {
    @media (min-width: $menu-breakpoint) {
      display: block;
      float: right;
    }    
  }
  // Navbar content/items
  .collapse,
  .collapsing {
    clear: both;
  }
  .navbar-nav .nav-item + .nav-item {
    margin-left: 0;
  }
  .navbar-nav .nav-item {
    float: none;
  }
  @media (min-width: $menu-breakpoint) {
    .collapse,
    .collapsing {
      clear: none;
    }    
    .navbar-nav .nav-item + .nav-item {
      margin-left: 1rem;
    }
    .navbar-nav .nav-item {
      float: left;
    }
  }  
}

Which compiles into the following CSS:

.navbar-custom-breakpoint .navbar-toggler {
    float: right;
}
@media (min-width: 940px) {
    .navbar-custom-breakpoint .navbar-toggler {
        display: none;
    }
}
@media (min-width: 940px) {
    .navbar-custom-breakpoint .collapse {
        display: block;
        float: right;
    }
}
.navbar-custom-breakpoint .collapse,
.navbar-custom-breakpoint .collapsing {
    clear: both;
}
.navbar-custom-breakpoint .navbar-nav .nav-item + .nav-item {
    margin-left: 0;
}
.navbar-custom-breakpoint .navbar-nav .nav-item {
    float: none;
}
@media (min-width: 940px) {
    .navbar-custom-breakpoint .collapse,
    .navbar-custom-breakpoint .collapsing {
        clear: none;
    }
    .navbar-custom-breakpoint .navbar-nav .nav-item + .nav-item {
        margin-left: 1rem;
    }
    .navbar-custom-breakpoint .navbar-nav .nav-item {
        float: left;
    }
}

 

The Result

A Bootstrap navbar that collapses exactly at the point where there isn’t enough room for all the menu items, perfect! Check out the demo and download the files below.

License

Use and abuse as you please but it this was useful please share this post on social media!

No Coments

    Leave a Reply

    Your email address will not be published. Required fields are marked *