Bsnav adds features to the Bootstrap 4 navbar element.
See the demo
How to use it
To start using it, include the css and js files.
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/fitodac/[email protected]/dist/bsnav.min.css">
Then, before your closing <body> tag add:
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/fitodac/[email protected]/dist/bsnav.min.css">
Where you want to show the menu, you must include the following code:
<div class="navbar navbar-expand-lg bsnav bsnav-light">
<a class="navbar-brand" href="#">bsnav</a>
<button class="navbar-toggler toggler-spring"><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse justify-content-md-end">
<ul class="navbar-nav navbar-mobile mr-0">
<li class="nav-item active"><a class="nav-link" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">About Us</a></li>
<li class="nav-item"><a class="nav-link" href="#">Gallery</a></li>
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
</div>
</div>In the demo you can find other styles for navabars.
Mobile navbar
Bsnav includes a mobile sidebar menu. To work, you must include the following html code before closing the <body> tag, then, the bsnav javascript will be responsible for cloning the menu to use it for mobile versions.
<div class="bsnav-mobile">
<div class="bsnav-mobile-overlay"></div>
<div class="navbar"></div>
</div>
