Design a Responsive Side Menu for Bootstrap 4

First, let’s set up the basic Bootstrap 4 Navbar with some dummy content.

homepage.html

 <nav class="navbar navbar-light navbar-static bg-faded" role="navigation">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="nav navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Home</a>
    </li>
    <!-- insert more nav-items if you so choose -->
    <button class="navbar-toggler pull-xs-right" id="navbarSideButton" type="button">
      &#9776;
    </button>
  </ul>
    <!-- navbar-side will go here -->
</nav>

Next, we will drop in the side navbar just before the closing nav tag. Notice we added some new classes that we will define in our CSS in the next checkpoint.

 <ul class="navbar-side" id="navbarSide">
  <li class="navbar-side-item">
    <a href="#" class="side-link">Signup</a>
  </li>
  <!-- insert more side-items if you so choose -->
</ul>

Now we need to define the styles for navbar-side and navbar-side-item custom classes we defined above. In this lesson, we will stick to the convention of using rem for sizing as opposed to pixels, which is one of the major changes in BS4. If using BS3, you will need to tweak the rem values back to pixels.

This style will give us our initial menu container. It is currently in the open state, but this will updated in the next step using CSS animations.

navbar-side.scss

.navbar-side {
  height: 100%;
  width: 25%;
  position: fixed;
  top: 0;
  right: 0;
  padding: 0;
  list-style: none;
  border-left: 2px solid #ccc;
  background-color: #f7f7f9;
  overflow-y: scroll;
  z-index: 1000;
}

Next, let’s add some basic style to our the classes attached to the the list items and links. These two classes will be where you want to add your own creative CSS styles and flavors.

 .navbar-side-item {
  padding: 1.5rem 0;
  margin: 0;
  border-bottom: 2px solid #ccc;
  height: 5rem;
}

.side-link {
  padding-left: 2rem;
}

We are using the CSS property ‘transform’ with a translateX value of 100% to push the menu on the x-axis. In addition, we are using the ‘transition’ property with a 300ms ease to make the menu open with a swift and graceful animation. 

 .navbar-side {
    // other code omitted
  -webkit-transform: translateX(100%);
  -ms-transform: translateX(100%);
  transform: translateX(100%);
  -webkit-transition: 300ms ease;
  transition: 300ms ease;
}

Next, we need to toggle this state by adding an additional class when the Navbar button is clicked. Let’s call this class reveal. 

 .reveal {
  -webkit-transform: translateX(0%);
  -ms-transform: translateX(0%);
  transform: translateX(0%);
  -webkit-transition: 300ms ease;
  transition: 300ms ease;
}

Now we simply add this class when the menu is clicked with jQuery. Note: You could achieve this by using Bootstrap’s built in collapse plugin, but I feel this actually makes things more complicated, so here’s a new JavaScript (jQuery) function from scratch. 

 $( document ).ready(function() {
  $('#navbarSideButton').on('click', function() {
    $('#navbarSide’).addClass('reveal');
  });
});

A nice touch we can add to the mobile side menu is an overlay that pops up when the menu is active - eliminating any other distractions on the screen. When visitors clicks or touches the overlay, the menu will animate back to its hidden off-canvas position. 

First, we need add an extra div to our HTML before the closing nav tag. 

<nav class="navbar navbar-light navbar-static bg-faded”>
<!-- other navbar code omitted -->
<div class="overlay"></div>
</nav>

Second, lets add some style to it. 

.overlay {
  position: fixed;
  display: none;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
  background-color: #ccc;
  opacity: 0.6;
  z-index: 990;
}

Lastly, lets add to our JavaScript to toggle its visibility and hide the side navbar when the overlay is clicked or touched. 

$( document ).ready(function() {

  // Open navbarSide when button is clicked
  $('#navbarSideButton').on('click', function() {
    $('#navbarSide').addClass('reveal');
    $('.overlay').show();
  });

  // Close navbarSide when the outside of menu is clicked
  $('.overlay').on('click', function(){
    $('#navbarSide').removeClass('reveal');
    $('.overlay').hide();
  });

});

The width of the menu is currently set at 25%, which is not going to work on small or medium screens. We are going to use the new media query mixins in Bootstrap 4 to change the menu width based on viewport size.

.navbar-side {
	// other code omitted
  @include media-breakpoint-up(xs) { width: 85%; } // Small
  @include media-breakpoint-up(sm) { width: 50%; } // Medium
  @include media-breakpoint-up(md) { width: 25%; } // Large
}

That's it! Hopefully this lesson helped you create an awesome responsive menu for your bootstrap 4 app.