Reverting hamburger animation after clicking the menu item

Question

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"><a href="#">portfolio</a></li>
            <li><a href="#">services</a></li>
            <li><a href="#">about</a></li>
            <li><a href="#">contact</a></li>
            </ul>
        </nav>
    </div>

Does anyone know where how to fix this issue?

Answer 1

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. :)