responsive menu overlay burger

HTML

<div class="container container-narrow">
      <div class="menu">
	            <div class="nav-bar"></div>
	            <div class="nav-bar"></div>
	            <div class="nav-bar"></div>
	        </div>
          
          <div class="nav-section">
            <ul class="nav">
                <li><a href="#home" class="scroll home">LINK NAME</a></li>
                <li><a href="#about" class="scroll about">LINK TITLE</a></li>
                <li><a href="#work" class="scroll work">LINK SUBJECT</a></li>
                <li><a href="#contact" class="scroll contact">BLA di BLA</a></li>
            </ul>
        </div>
          </div>
           
         <div class="hide">
       
         </div>

CSS

@import url(https://fonts.googleapis.com/css?family=Lato:700,300,100);
body {
    background: #323232;
    font-family: 'Lato', sans-serif;
    font-weight: 300;
    color: #fff;
    padding: 50px 50px;
}

.nav {
    width: 380px;
    height: 300px;
    left: 0;
    position: absolute;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
}

.nav > li a {
    color: #fff;
    font-size: 40px;
    padding: 17px 25px;
    text-align: center;
}

.nav > li a:hover {
    color: #fff;
    text-decoration: none;
    background: transparent;
    background: rgba(0, 0, 0, 0); /* fallback */
}

.nav-section {
    height: 0;
    width: 0;
    position: fixed;
    z-index: 89;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.75);
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
}

.show {
    height: 100%;
    width: 100%;
}
/* Menu button */
.nav-bar, 
.menu {
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.nav-bar {
    width: 35px;
    background-color: #d0d0d0;
    height: 5px;
    margin-bottom: 8px;
}

.menu {
    width: 35px;
    height: 31px;
    padding: 10px;
    z-index: 100;
    right: -70px;
    top: 0px;
    position: absolute;
    cursor: pointer;
}

.animate-1 {
    width: 0;
}

.animate-2 {
    width: 35px;
    -webkit-transform: rotate(-45deg) translate(10px, -10px);
    -moz-transform: rotate(-45deg) translate(10px, -10px);
    -o-transform: rotate(-45deg) translate(10px, -10px);
    -ms-transform: rotate(-45deg)...

JavaScript

function menu() {
	$(".menu,.nav a").click(function(){
		$(".nav-section").toggleClass("show");
		$(".menu .nav-bar:nth(0)").toggleClass("animate-0");
		$(".menu .nav-bar:nth(1)").toggleClass("animate-1");
		$(".menu .nav-bar:nth(2)").toggleClass("animate-2");
	});
	var offset = $(".menu").offset();
	var topPadding = 10;
  // andrews burger bun fun
	$(window).scroll(function() {
  // burger

  // based on position (project specific placement)
    var top = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
 if (top < 120) { 
$('.menu').addClass("hide");
} else {
 $('.menu').addClass("show");
}
}); 
// master scroll after aforementioned 
$('.scroll').smoothScroll({easing: 'swing', speed: 1400});

};


menu();