Navigation bar is made to be responsive, but do not add too many links.
<div class="nav-container">
<span id="menu-icon"></span>
<h1 class="nav-title">Cool website</h1>
<!-- OR -->
<div class="nav-content">
<h4>Nice stuff</h4>
</div>
<div id="navside" class="sidenav">
<a href="#" class="current">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
<script>
var navside = document.getElementById('navside');
document.getElementById("menu-icon").onclick = function() { navside.style.transform = "translateX(0)"; }
document.addEventListener("click", function(event) {
if (event.target.closest(".nav-container")) return;
navside.style.transform = "translateX(-250px)";
});
</script>
</div>
If you do not wish to have only menu icon, you can simple add this to nav-container.
<div class="nav-container default">
<!-- [...] -->
</div>
and you can also drop the <script> part as well
<!-- Include this in your website -->
<script src="https://modesta.alexflipnote.xyz/js/navbar.js"></script>
<!-- Then add ID and class to nav-container -->
<div id="navbar" class="nav-container default">
<!-- [...] -->
</div>