Problems with hiding css3/js overlay navigation

Hi everyone,

first of all thanks for taking your time to read this.

I am experimenting with some navigations and have gotten stuck at one point. I have my navigation, which pops up when you click the hamburger. However, when the link in the navigation is clicked, the overlay doesn't go away. I solved this by adding this javascript

function show(target) {
    document.getElementById(target).style.display = 'block';
}

function hide(target) {
    document.getElementById(target).style.display = 'none';
}

and adding onclick="hide('overlay')" to the links in the nav. This solved my initial problem but caused a different one. Now, the overlay and navigation won't show up if I press the burger again. Does anyone have an idea to solving this?

ALSO, when scrolling down on the page, the overlay isn't at full opacity anymore, and the text (seems to be only the text actually) comes through. What could this be?

Here's the markup for the navigation:

<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 ><a onclick="hide('overlay')" href="#intro">500</a></li>
      <li><a onclick="hide('overlay')" href="#service">Services</a></li>
      <li><a onclick="hide('overlay')" href="#about">People</a></li>
      <li><a onclick="hide('overlay')" href="#contact">Contact</a></li>
    </ul>
  </nav>
</div>

and here's the link to the site: http://500stockholm.com/500stockholm/site.html

ALSO, bonus question (sorry). I'm trying to animate an X instead of the hamburger icon. But I don't really know where to start. Any directions?

Thank you all again!