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 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>
    var navside = document.getElementById('navside');
    document.getElementById("menu-icon").onclick = function() { = "translateX(0)"; }
    document.addEventListener("click", function(event) {
      if (".nav-container")) return; = "translateX(-250px)";

If you do not wish to have only menu icon, you can simple add this to nav-container.

<div class="nav-container default">
  <!-- [...] -->

and you can also drop the <script> part as well


<!-- Include this in your website -->
<script src=""></script>

<!-- Then add ID and class to nav-container -->
<div id="navbar" class="nav-container default">
  <!-- [...] -->


Click here