<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<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 -->
<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>
</nav>
$( document ).ready(function() {
$('#navbarSideButton').on('click', function() {
$('#navbarSide’).addClass('reveal');
});
});
$( 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();
});
});
