Show Nav Bar on Button Click - Doesn't Close Afterwards

Question

So I've set up a new navigation on my website so that it is now hidden as an icon and displays when it is clicked. Once clicked again it is supposed to hide the menu again, however, it does not.

Example of Menu Closed:

Example of Menu Opened:

Clicking the three bars icon opens the four menu buttons you see in the second example, but then when I try to click the button to close the menu, it does nothing... even though it is supposed too. Any help on fixing this would be greatly appreciated.

HTML:

<div class="menu-button">
        <a href="#main_nav" id="access_nav"><i class="fa fa-bars"></i></a>
    </div>

    <nav id="main_nav">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</div>

CSS:

/* ------------------------------------------------------------------- */
/* Navigation Section
---------------------------------------------------------------------- */

.menu-button {
    padding-top:25px;
    padding-left:30px;
    float:left;
}

.menu-button a {
    color:#eee;
}

.menu-button a:hover {
    color:#940002;
}

#main_nav {
    display:none;
    position: absolute;
    padding-left: 40px;
    padding-top: 10px;
}

#main_nav ul {
    list-style-type:none;
}

#main_nav li {
    display:inline;
    margin:0 10px;
}

#main_nav a {
    text-decoration:none;
    color:#fff;
}


.with_nav #main_nav {
    display: block;
}


#main_nav:target {
    display: block;
}

JavaScript:

<!-- JavaScript
================================================== -->
<script src="https://use.fontawesome.com/430ad8b17b.js"></script>
<script>
var nav = document.getElementById('access_nav'),
    body = document.body;

nav.addEventListener('click', function(e) {
    body.className = body.className? '' : 'with_nav';
    e.preventDefault();
}); 
</script>

Answer 1

The issue isn't your JavaScript, it's your CSS. When #main_nav shows up, it's covering up the icon, so the icon is no longer clickable. You're clicking on #main_nav, not the icon. You can easily tell this because the hand mouse pointer your get on hover turns into a regular mouse pointer when the nav shows up.

In your CSS, the fix that makes the most sense is to remove the padding-left on #main_nav and use left instead, since you're already absolutely positioning it anyway.

#main_nav {
  display: none;
  position: absolute;
  /*padding-left: 40px;*/
  left: 60px;
  padding-top: 10px;
}

Working snippet:

var nav = document.getElementById('access_nav'),
  body = document.body;

nav.addEventListener('click', function(e) {
  body.className = body.className ? '' : 'with_nav';
  e.preventDefault();
});

.menu-button {
  padding-top: 25px;
  padding-left: 30px;
  float: left;
}

.menu-button a {
  color: #000;
}

.menu-button a:hover {
  color: #940002;
}

#main_nav {
  display: none;
  position: absolute;
  /*padding-left: 40px;*/
  left: 60px;
  padding-top: 10px;
}

#main_nav ul {
  list-style-type: none;
}

#main_nav li {
  display: inline;
  margin: 0 10px;
}

#main_nav a {
  text-decoration: none;
  color: #000;
}

.with_nav #main_nav {
  display: block;
}

#main_nav:target {
  display: block;
}

<div class="menu-button">
  <a href="#main_nav" id="access_nav"><img class="fa fa-bars" src="http://placehold.it/25x25"></a>
</div>

<nav id="main_nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Answer 2

body.className? '' : 'with_nav'; maybe create a class instead of setting it to no class. im not sure if this clears its css properties....