Develop Reference

How to close CSS menu when clicking on links with JS?

So I made a pure CSS menu and everything looks how I want it, except for when clicking the links. In my single page layout clicking the links navigates to a section of the page, but upon clicking the link, it just smooth scrolls to the section and the menu remains visible. I have read multiple similar questions and none of the solutions have worked for me. I would prefer to use JavaScript and no jQuery.
My website is still in working progress; check it out to really see what happens on mobile size https://www.itsalaam.com/
Here is my code:
/* NAVIGATION */
.header {
width: 100%;
position: fixed;
top: 0;
background: linear-gradient(rgba(0, 0, 0, 0.7), transparent);
z-index: 999;
overflow: hidden;
/* transition: background .2s ease-out; */
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
}
.header ul a {
display: block;
padding: 15px;
text-align: center;
color: rgb(224, 224, 224);
font-size: 1.7rem;
}
.header ul a:hover {
color: #fff;
}
.header .logo {
float: left;
display: block;
padding-top: 15px;
padding-left: 30px;
}
.header .logo img {
width: 50px;
transition: width .5s ease;
}
.header .menu {
clear: both;
float: right;
max-height: 0;
text-align: center;
width: 100%;
transition: max-height .2s ease-out;
transition: background 0.2s ease-out;
}
.header .menu-icon {
padding: 28px 20px;
position: relative;
float: right;
cursor: pointer;
/*menu-icon serves as the parent element of the span nav-icon the is nested within. so the span is the child element*/
}
.header .menu-icon .nav-icon {
/*creates the middle bar of the nav-icon*/
background: #fff;
display: block;
height: 2px;
width: 18px;
position: relative;
transition: background .2s ease-out;
}
.header .menu-icon .nav-icon:after,
.header .menu-icon .nav-icon:before {
background: #fff;
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
transition: all .2s ease-out;
}
.header .menu-icon .nav-icon:before {
top: 5px;
}
.header .menu-icon .nav-icon:after {
top: -5px;
}
.header .menu-btn {
display: none;
}
.header .menu-btn:checked~.menu {
/* the ~ selects the next sibling */
max-height: 100vh;
background: #000;
z-index: 99;
transition: background 0.2s ease-out;
/*because the max height was set to 0 on the .menu once the menu-btn is checked, the for attribute must match the id of the input checkbox. so when you click the label it targets the check box, which was set to display none.*/
}
/* the X for closing */
.header .menu-btn:checked~.menu-icon .nav-icon {
background: transparent;
}
/*middle line disappears*/
.header .menu-btn:checked~.menu-icon .nav-icon:before {
transform: rotate(-45deg);
top: 0;
}
.header .menu-btn:checked~.menu-icon .nav-icon:after {
transform: rotate(45deg);
top: 0;
}
<header class="header">
<img src="/img/globeWireframe.png" alt="salaam" />
<input type="checkbox" class="menu-btn" id="menu-btn" />
<label for="menu-btn" class="menu-icon"><span class="nav-icon"></span></label>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>
Resume
</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</header>

Use Javascript:
1. Get the checkbox to use it later.
2. Get all links in menu.
3. Add an event listener for each link to uncheck the checkbox on click, knowing that menu is displayen only when the checkbox is checked.
// Run once everything is loaded
window.onload = function() {
// Get the checkbox
let chk = document.getElementById('menu-btn');
// Get all menu links
let menuLinks = document.querySelectorAll('.menu li a');
// Loop on links
menuLinks.forEach(function(item) {
// Add event listener to each links
item.addEventListener('click', function() {
// When link is clicked, uncheck the checkbox to hide menu
chk.checked=false;
});
});
}
/* NAVIGATION */
.header {
width: 100%;
position: fixed;
top: 0;
background: linear-gradient(rgba(0, 0, 0, 0.7), transparent);
z-index: 999;
overflow: hidden;
/* transition: background .2s ease-out; */
}
.header ul {
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
}
.header ul a {
display: block;
padding: 15px;
text-align: center;
color: rgb(224, 224, 224);
font-size: 1.7rem;
}
.header ul a:hover {
color: #fff;
}
.header .logo {
float: left;
display: block;
padding-top: 15px;
padding-left: 30px;
}
.header .logo img {
width: 50px;
transition: width .5s ease;
}
.header .menu {
clear: both;
float: right;
max-height: 0;
text-align: center;
width: 100%;
transition: max-height .2s ease-out;
transition: background 0.2s ease-out;
}
.header .menu-icon {
padding: 28px 20px;
position: relative;
float: right;
cursor: pointer;
/*menu-icon serves as the parent element of the span nav-icon the is nested within. so the span is the child element*/
}
.header .menu-icon .nav-icon {
/*creates the middle bar of the nav-icon*/
background: #fff;
display: block;
height: 2px;
width: 18px;
position: relative;
transition: background .2s ease-out;
}
.header .menu-icon .nav-icon:after,
.header .menu-icon .nav-icon:before {
background: #fff;
content: "";
display: block;
height: 100%;
width: 100%;
position: absolute;
transition: all .2s ease-out;
}
.header .menu-icon .nav-icon:before {
top: 5px;
}
.header .menu-icon .nav-icon:after {
top: -5px;
}
.header .menu-btn {
display: none;
}
.header .menu-btn:checked~.menu {
/* the ~ selects the next sibling */
max-height: 100vh;
background: #000;
z-index: 99;
transition: background 0.2s ease-out;
/*because the max height was set to 0 on the .menu once the menu-btn is checked, the for attribute must match the id of the input checkbox. so when you click the label it targets the check box, which was set to display none.*/
}
/* the X for closing */
.header .menu-btn:checked~.menu-icon .nav-icon {
background: transparent;
}
/*middle line disappears*/
.header .menu-btn:checked~.menu-icon .nav-icon:before {
transform: rotate(-45deg);
top: 0;
}
.header .menu-btn:checked~.menu-icon .nav-icon:after {
transform: rotate(45deg);
top: 0;
}
<header class="header">
<img src="/img/globeWireframe.png" alt="salaam" />
<input type="checkbox" class="menu-btn" id="menu-btn" />
<label for="menu-btn" class="menu-icon"><span class="nav-icon"></span></label>
<ul class="menu">
<li>Home</li>
<li>About</li>
<li>
Resume
</li>
<li>Projects</li>
<li>Contact</li>
</ul>
</header>

JS/jquery: have <li>'s rotate/scale in with delay? Weird CSS

Ok, never done anything like this in JS and CSS here but I am trying to achieve this effect with some buttons in a circular expanding div, and a static "x" button in far left that rotates. https://dribbble.com/shots/3445331-Expanding-Button
For whatever reason I can't get the transition to happen with an increasing delay on each li. What I do is add a "pill" class to both the ul containing the lis (to make them display:none to block) and then to the individual lis.
$('.top-left').hover(function(){
$(this).toggleClass("pill");
$('.top-left ul').toggleClass("pill");
$('.top-left img').toggleClass("pill");
$('.top-left ul li').each(function(i, elem) {
$(elem).delay(i * 800).toggleClass("pill");
});
});
.top-left ul {
list-style-type: none;
margin: 0;
padding: 0;
font-size: 35px;
margin-left: 0;
display: none;
transform: translate(20px, -46px);
}
.top-left img {
margin: auto;
width: 40px;
display: table;
margin: 0 auto 10px;
margin-top: 6px;
transition-timing-function: cubic-bezier(0, 1.4, 1, 1);
transition-duration: 205ms;
}
.top-left img.pill {
display: block;
margin-left: 15px;
transform: rotate(90deg);
transition-timing-function: cubic-bezier(0, 1.4, 1, 1);
transition-duration: 250ms;
}
.top-left ul li {
cursor: pointer;
padding-right: 10px;
float: left;
transition-timing-function: cubic-bezier(0, 1.4, 1, 1);
transition-duration: 250ms;
transform: scale(0.01,0.01) rotate(-30deg) translate(43px, 0px);
}
.top-left ul li.pill:hover {
color: #fff;
}
.top-left {
width: 55px;
height: 55px;
border-radius: 55px;
transition: width ease 0.3s;
margin-top: 15px;
background: #4d4d4d;
border: 4px solid #333;
}
.top-left.pill {
width: 207px;
}
.top-left ul.pill {
display: block;
}
.top-left ul li.pill {
float: left;
transform: scale(1,1) rotate(0deg) translate(43px, 0);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top-left">
<img src="http://placehold.it/100x100" alt="">
<ul>
<li value='1'><i class="icon-twitter-sign"></i></li>
<li value='2'><i class="icon-twitter-sign"></i></li>
<li value='3'><i class="icon-instagram"></i></li>
</ul>
</div>
The lis show up and in the right place, but no animation occurs, at least that is visible. What is wrong here?

You just need to add class 'pill' to .top-left :
$('.top-left').hover(function () {
$(this).toggleClass("pill");
}
And then you can use this animation with different animation delay for all lis.
#keyframes myAnim {
0% {transform: rotate(90deg) scale(0);}
100% {transform: rotate(0deg) scale(1);}
}
.top-left.pill ul li:first-child {
animation: myAnim .25s;
}
.top-left.pill ul li:nth-child(2) {
animation: myAnim .25s .8s;
}
.top-left.pill ul li:last-child {
animation: myAnim .25s 1.6s;
}
And the rest of the css:
.top-left ul {
list-style-type: none;
margin: 0;
padding: 0;
font-size: 35px;
/* padding-top: 10px;
padding-bottom: 10px; */
margin-left: 0px;
display: none;
transform: translate(20px, -46px);
}
.top-left img {
margin: auto;
width: 40px;
display: table;
margin: 0 auto 10px;
margin-top: 6px;
/* What transition ? */
transition-timing-function: cubic-bezier(0, 1.4, 1, 1);
transition-duration: 250ms;
}
.top-left.pill img {
display: block;
margin-left: 15px;
transform: rotate(90deg);
}
.top-left ul li {
cursor: pointer;
padding-right: 10px;
float: left;
}
.top-left.pill li:hover {
color: white;
}
.top-left {
width: 55px;
height: 55px;
border-radius: 55px;
transition: width ease 0.3s;
margin-top: 15px;
background: #4d4d4d;
border: 4px solid #333333;
}
.top-left.pill {
width: 207px;
}
.top-left.pill ul {
display: block;
}

Reverting hamburger animation after clicking the menu item

I'm currently setting up a one page website including a hamburg menu.
The menu is build up with list elements which are linked to a specific tag on that page.
I have only one issue and that's to revert the hamburg icon animation (which becomes a cross on click) back to it's normal state.
Here's the code :
$('#toggle').click(function() {
$(this).toggleClass('active');
$('#overlay').toggleClass('open').show();
});
$('#overlay li').on('click', function(){
$('#overlay').hide();
$('#toggle').removeClass("active");
});
#import url('https://fonts.googleapis.com/css?family=Varela+Round');
.container p {
font-size: 20px;
}
.container a {
display: inline-block;
position: relative;
text-align: center;
color: #1abc9c;
text-decoration: none;
font-size: 20px;
overflow: hidden;
top: 5px;
}
.container a:after {
content: '';
position: absolute;
background: #1abc9c;
height: 2px;
width: 0%;
transform: translateX(-50%);
left: 50%;
bottom: 0;
transition: .35s ease;
}
.container a:hover:after, .container a:focus:after, .container a:active:after {
width: 100%;
}
h1 {
position: relative;
text-align: center;
font-family: 'Varela Round', serif;
}
.button_container {
position: fixed;
top: 5%;
right: 2%;
height: 27px;
width: 35px;
cursor: pointer;
z-index: 100;
transition: opacity .25s ease;
}
.button_container:hover {
opacity: .7;
}
.button_container.active .top {
transform: translateY(11px) translateX(0) rotate(45deg);
background: #FFF;
}
.button_container.active .middle {
opacity: 0;
background: #FFF;
}
.button_container.active .bottom {
transform: translateY(-11px) translateX(0) rotate(-45deg);
background: #FFF;
}
.button_container span {
background: #fd7014;
border: none;
height: 5px;
width: 100%;
position: absolute;
top: 0;
left: 0;
transition: all .35s ease;
cursor: pointer;
}
.button_container span:nth-of-type(2) {
top: 11px;
}
.button_container span:nth-of-type(3) {
top: 22px;
}
.overlay {
position: fixed;
background: #1a1a1a;
top: 0;
left: 0;
width: 100%;
height: 0%;
opacity: 0;
visibility: hidden;
transition: opacity .35s, visibility .35s, height .35s;
overflow: hidden;
}
.overlay.open {
opacity: .9;
visibility: visible;
height: 100%;
}
.overlay.open li {
animation: fadeInRight .5s ease forwards;
animation-delay: .35s;
}
.overlay.open li:nth-of-type(2) {
animation-delay: .4s;
}
.overlay.open li:nth-of-type(3) {
animation-delay: .45s;
}
.overlay.open li:nth-of-type(4) {
animation-delay: .50s;
}
.overlay nav {
position: relative;
height: 70%;
top: 50%;
transform: translateY(-50%);
font-size: 30px;
font-family: 'Varela Round', sans-serif;
font-weight: 400;
text-align: center;
}
.overlay ul {
list-style: none;
padding: 0;
margin: 0 auto;
display: inline-block;
position: relative;
height: 100%;
}
.overlay ul li {
display: ;
height: 25%;
height: calc(100% / 4);
min-height: 50px;
position: relative;
opacity: 0;
}
.overlay ul li a {
display: ;
position: relative;
color: #fd7014;
text-decoration: none;
overflow: hidden;
}
.overlay ul li a:hover:after, .overlay ul li a:focus:after, .overlay ul li a:active:after {
width: 100%;
}
.overlay ul li a:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0%;
transform: translateX(-50%);
height: 3px;
background: #FFF;
transition: .35s;
}
#keyframes fadeInRight {
0% {
opacity: 0;
left: 20%;
}
100% {
opacity: 1;
left: 0;
}
}
<div id="toggle" class="button_container">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>
<div id="overlay" class="overlay">
<nav class="overlay-menu">
<ul>
<li class="overlay-li">portfolio</li>
<li>services</li>
<li>about</li>
<li>contact</li>
</ul>
</nav>
</div>
Does anyone know where how to fix this issue?

I dont have above 50 reputations so cant resolve your problem in comments,...
you just forgot to toggle the 'open' class of overlay when you are clicking on li
so just add the following line in your li click function
$('#overlay').toggleClass('open');
http://jsbin.com/faquzisobi/2/edit?html,css,js,output
everything else seems fine. :)

Links jumping on hover

I've been looking at my CSS too long and need another set of eyes. I'm having trouble with a couple things. First: I can't figure out why my links are jumping on hover. It's supposed to be a mobile responsive hamburger to horizontal nav bar but I'm fairly new to this and have played around with too many parts of the code to know what I'm doing or not doing. Any help is appreciated!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">google.load("jquery", "1.3.2");</script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<style>
body {
font-family: 'Noto Sans', sans-serif;
margin: 0;
width: 100%;
height: 100vh;
background: #ffffff;
background-color: black;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
header {
width: 100%;
background: #ffffff;
position: fixed;
height: 4em;
line-height: 4em;
display: inline-block;
padding-left: 1em;
border-bottom: .1em solid #dddddd;
}
h2 {
font-size: 2.1em;
}
p {
font-size: 10em;
color: white;
padding-top: 1em;
}
#media only screen and (min-width: 319px) {
.menu {
z-index: 1;
display: none;
font-weight: bold;
font-size: 1.2em;
width: 100%;
background: #f1f1f1;
position: fixed;
text-align: center;
margin-top: 3.3em;
color: black;
}
.menu ul {
margin: 0;
padding: 0;
list-style-type: none;
list-style-image: none;
border-top: #dddddd 1px solid;
}
.menu li {
display: block;
padding: 1em 0 1em 0;
border-bottom: #dddddd 1px solid;
}
.menu li:hover {
display: block;
background: #585858;
padding: 1em 0 1em 0;
cursor: crosshair;
}
.menu ul li a {
text-decoration: none;
margin: 0px;
color: black;
}
.menu ul li a:hover {
color: white;
text-decoration: none;
}
.menu a {
text-decoration: none;
color: black;
}
.menu a:hover {
text-decoration: none;
color: white;
}
#nav-icon4 {
width: 35px;
height: 25px;
float: right;
margin-top: -47px;
margin-right: 30px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: cell;
}
#nav-icon4 span {
display: block;
position: absolute;
height: 5px;
width: 100%;
background: darkred;
border-radius: 7px;
opacity: 2;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
}
#nav-icon4 span:nth-child(1) {
top: 0px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon4 span:nth-child(2) {
top: 10px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon4 span:nth-child(3) {
top: 20px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}
#nav-icon4.open span:nth-child(1) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: 0;
left: 6px;
}
#nav-icon4.open span:nth-child(2) {
width: 0%;
opacity: 0;
}
#nav-icon4.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 25px;
left: 6px;
}
}
#media only screen and (min-width : 768px) {
h2 {
z-index: 1000000;
font-size: 1.5em;
}
p {
font-size: 20em;
color: white;
padding-top: 1em;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: right;
margin-left: 20px;
margin-right: 8px;
margin-top: -10px;
}
li a {
display: block;
text-align: center;
text-decoration: none;
}
.menu {
display: block;
position: absolute;
right: 0px;
font-size: .9em;
width: 100%;
padding-right: 15px;
margin-top: 10px;
padding-top: 10px;
padding-bottom: 10px;
background: rgba(255, 255, 255, 0);
}
.menu ul {
border-bottom: 0;
border-top: 0;
}
.menu li {
border-bottom: 0;
border-top: 0;
}
.menu li:hover {
cursor: crosshair;
padding-top: 1em;
padding-bottom: 1em;
padding-right: 15px;
padding-left: 1em;
}
.menu ul li a:hover {
color: white;
}
#nav-icon4 {
display: none;
}
}
#media only screen and (min-width : 922px) {
li {
margin-left: 55px;
margin-right: 18px;
}
.menu {
padding-right: 1px;
}
}
#media only screen and (min-width : 1400px) {
header {
height: 5em;
line-height: 5em;
}
h2 {
font-size: 2.6em;
}
li {
margin-left: 55px;
margin-right: 30px;
}
.menu {
padding-right: 1px;
font-size: 1.2em;
}
}
</style>
<title>hamburgers</title>
</head>
<body>
<header>
<span>Shine Design</span>
<div id="nav-icon4">
<span></span>
<span></span>
<span></span>
</div>
</header>
<div class="menu">
<ul>
<a href="#">
<li>LINK ONE</li>
</a>
<a href="#">
<li>LINK TWO</li>
</a>
<a href="#">
<li>LINK THREE</li>
</a>
<a href="#">
<li>LINK FOUR</li>
</a>
<a href="#">
<li>LINK FIVE</li>
</a>
</ul>
</div>
</body>
<script>
$(document).ready(function(){
$('#nav-icon4').click(function(){
$(this).toggleClass('open');
});
});
</script>
</html>

go to line 237 and change this:
.menu li:hover {
cursor: crosshair;
padding-top: 1em;
padding-bottom: 1em;
padding-right: 15px;
padding-left: 1em;
}
to this
.menu li:hover {
cursor: crosshair;
padding-top: 1em;
padding-bottom: 1em;
padding-right: 0em;
padding-left: 0em;
}

Can't get button to move on li:hover when .active

I'm a little new to javascript and used a small one to get my menu to appear en move the button accordingly but I wanted to implement submenu's. Now when I want the button to move when the submenu is activated(hovered on main li) it won't.
What am I doing wrong?
A little side note, the menu also expands (on hover 2nd li) when it's not activated that's my second question.
http://jsfiddle.net/drjvdyhb/
body {
font: 400 18px'Fjord One', sans-serif;
line-height: 1em;
background-color: #fff;
color: #c0c5ce;
}
header {
position: relative;
background-color: #2c353a;
}
header ul.nav {
overflow: auto;
margin: 0em;
padding: 0em;
}
header ul.nav li {
position: relative;
float: left;
width: 20%;
list-style: none;
}
header ul.nav li a {
display: block;
height: 30px;
opacity: 0;
font: 400 1.15em'Fjord One', serif;
line-height: 30px;
color: #848e92;
text-decoration: none;
text-align: center;
cursor: default;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
}
header ul.nav li:hover a {
color: #fff;
background-color: #222b2f;
}
header ul.nav li:hover ul li a {
color: #848e92;
background-color: #2c353a;
}
header ul.nav li ul li:hover a {
color: #fff;
background-color: #222b2f;
}
header ul li ul {
position: relative;
left: 0px;
padding: 0px 0px 0px;
width: 100%;
height: 100%;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
header ul li ul li {
display: block;
color: #fff;
}
header ul.nav li ul li {
width: 50%;
font-size: 14px;
}
header ul.nav li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
header ul.nav li:hover button.toggle-nav {
top 90px;
}
header ul li ul li a {
font: 400 1em'Fjord One', serif;
color: #848e92;
}
header.active ul.nav li a {
height: 60px;
opacity: 1;
line-height: 60px;
cursor: pointer;
}
header.active ul.nav li ul li a {
Height: 30px;
line-height: 100%;
}
button.toggle-nav {
position: absolute;
top: 30px;
left: calc(50% - 30px);
width: 40px;
height: 35px;
background-color: #38a6a6;
font: 400 1.2em'Allan', serif;
color: #fff;
border: none;
line-height: 30px;
vertical-align: middle;
outline: none;
cursor: pointer;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
}
button.toggle-nav:hover {
height: 50px;
}
button.toggle-nav span {
display: block;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.25s ease;
}
header.active button.toggle-nav {
top: 60px;
background-color: #256f6f;
}
/* My try so far */
header.active ul.nav li.hvr a:hover button.toggle-nav {
top: 90px;
}
header.active button.toggle-nav span {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
}
#nav-toggle {
cursor: pointer;
padding: 5px 10px 10px 10px;
}
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
cursor: pointer;
border-radius: 1px;
height: 5px;
width: 20px;
background: white;
position: absolute;
display: block;
content:'';
}
#nav-toggle span:before {
top: 10px;
}
#nav-toggle span:after {
bottom: 10px;
}
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {
transition: all 500ms ease-in-out;
}
#nav-toggle.active span {
background-color: transparent;
}
#nav-toggle.active span:before, #nav-toggle.active span:after {
top: 0;
}
#nav-toggle.active span:before {
transform: rotate(45deg);
}
#nav-toggle.active span:after {
transform: rotate(-45deg);
}

Set position: relative for button.toggle-nav and remove top: 30px;,
Have a look at this JSFiddle

try this css code
#nav-toggle {
z-index: 10000000;
position: fixed;
cursor: pointer;
padding: 5px 10px 10px 10px;
top: 0px;
}