Hamburger menu + simple mobile menu

gistfile1.txt

// Markup
<nav>
      <ul class="nav">
        <li><a href="#main"  class="nav__link">Home</a></li>
        <li><a href="#about" class="nav__link">About</a></li>
        <li><a href="#"      class="nav__link">Contacts</a></li>
        <li><a href="#"      class="nav__link">Portfolio</a></li>
        <li><a href="#"      class="nav__link">Feeback</a></li>
      </ul>
      <button class="hamburger hamburger--elastic" type="button">
        <span class="hamburger-box">
          <span class="hamburger-inner"></span>
        </span>
      </button>
    </nav>

// Style
@import "hamburgers";

.hamburger {
	position: fixed;
	top: 2rem;
	right: 1rem;
	outline: none;
}
.nav {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: fixed;
	line-height: 4;
	width: 100%;
	height: 100vh;
	background-color: #8eeeff;
	transform: translateX(100%);
	transition: all 0.8s;
	&__link {
		text-decoration: none;
		color: $white;
		text-transform: uppercase;
		font-family: 'Tahoma', serif;
	}
}
.nav.__active {
	transform: translateX(0%);
}

// Script
$(document).ready(function() {
  // Menu navigation script (toggling)
    $('.hamburger, .nav__link').click(function() {
      $('.hamburger').toggleClass('is-active');
      $('.nav').toggleClass('__active');
    });
});