show li active

HTML

<div class="container">
  <h1>YOU SELECT ITEM'S :</h1>
  <span></span>
</div>

<div class="button_container" id="toggle">
  <span class="top"></span>
  <span class="middle"></span>
  <span class="bottom"></span>
</div>

<div class="overlay" id="overlay">
  <nav class="overlay-menu">
    <ul>
      <li id="home"><a href="#">Home</a></li>
      <li id="about"><a href="#">About</a></li>
      <li id="work"><a href="#">Work</a></li>
      <li id="contact"><a href="#">Contact</a></li>
    </ul>
  </nav>
</div>

SCSS

@import url(http://fonts.googleapis.com/css?family=Vollkorn|Roboto);

$color-background: #F5F5F5;
$color-main: #FF5252;
$color-active: #FFF;
$color-link: #FFF;

$button-height: 27px;
$button-width: 35px;

body {
  background: $color-background;
}

.container {
  position: absolute;
  width: 100%;
  heigh: 100%;
  text-align: center;
  top: 40%;
  left: 0;
  margin:  0 auto;
  font-family: 'Roboto', sans-serif;

  span {
    font-size: 20px;
    color:$color-main;
  }
  
  a {
    display: inline-block;
    position: relative;
    text-align: center;
    color: $color-main;
    text-decoration: none;
    font-size: 20px;
    overflow: hidden;
    top: 5px;
    
    &:after {
      content: '';
      position: absolute;
      background: $color-main;
      height: 2px;
      width: 0%;
      transform: translateX(-50%);
      left: 50%;
      bottom: 0;
      transition: .35s ease;
    }
    &:hover:after,
    &:focus:after,
    &:active:after {
      width: 100%;
    }
  }
}

h1 {
  position: relative;
  text-align: center;
  font-family: 'Vollkorn', serif;
}

.button_container {
  position: fixed;
  top: 5%;
  right: 2%;
  height: $button-height;
  width: $button-width;
  cursor: pointer;
  z-index: 100;
  transition: opacity .25s ease;
  
  &:hover {
    opacity: .7;
  }
  
  &.active {
    .top {
      transform: translateY(11px) translateX(0) rotate(45deg);
      background: $color-active;
    }
    .middle {
      opacity: 0;
      background: $color-active;
    }
    
    .bottom {
      transform: translateY(-11px) translateX(0) rotate(-45deg);
      background: $color-active;
    }
  }
  
  span {
  background: $color-main;
  border: none;
  height: 5px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transition:  all .35s ease;
  cursor: pointer;
    
    &:nth-of-type(2) {
      top: 11px;
    }
    
    &:nth-of-type(3) {
      top: 22px;
    }
  }
}

.overlay {
  position: fixed;
  background: $color-main;
  top: 0;
  left: 0;
  width:...

JavaScript

$('#toggle').click(function() {
   $(this).toggleClass('active');
   $('#overlay').toggleClass('open');
  });

$('li').click(function() {
   $('h1 + span').text( $(this).attr('id') )
   $('#overlay').removeClass('open');
   $('#toggle').removeClass('active');
})