One of the most annoying limitations of Bootstrap is its mobile navbar. It would be nice if a responsive off-canvas mobile side menu was built into the the navbar component, but it doesn’t look like this will be the case anytime soon.
In this lesson, we are going to build a responsive side menu feels more like something you would seen in an iOS or Android app. The goal is to create a side navigation that looks great on any device and can be easily dropped into your bootstrap project.
Lesson Checkpoints
1. Setting up the HTML
2. CSS (SCSS) for the Off Canvas Side Menu
3. Opening the Menu Gracefully with CSS Animations and JavaScript
4. Closing the Menu Gracefully with an Overlay and JavaScript
5. Making the Menu Look Awesome on All Devices
1. Setting up the HTML
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">
☰
</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>