title: Mobile Nav Javascript Not Working
body: <p>I'm a bit of a beginner here, and doing exercises on FreeCodeCamp. While working on the Portfolio Site project, I tried adding a Javascript responsive mobile nav to the site from some code at ws3schools.</p>
  
  <p>The nav is showing up fine, but clicking it does nothing. Here's my CodePen, any ideas what I did that's preventing it from popping up the nav links on click? <a href="https://codepen.io/colum1225/pen/xLwMJG" rel="nofollow noreferrer">https://codepen.io/colum1225/pen/xLwMJG</a></p>
  
  <p>Here's the nav bar code:</p>
  
  <pre><code>&lt;!-- HTML --&gt;
  
  &lt;div class="topnav" id="myTopnav"&gt;
    &lt;h3&gt;Brandon Ray&lt;/h3&gt;
    &lt;a href="#contact"&gt;Contact&lt;/a&gt;
    &lt;a href="#about"&gt;About&lt;/a&gt;
    &lt;a href="#portfolio"&gt;Portfolio&lt;/a&gt;
    &lt;a href="javascript:void(0);" class="icon" onclick="myFunction()"&gt;&amp;#9776;&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;!-- CSS --&gt;
  
  .topnav {
    background-color: #2C8597;
    overflow: hidden;
    width: 100%;
    position: fixed;
    z-index: 9;
  }
  
  .topnav h3 {
    float: left;
    color: #f2f2f2;
    font-family: sans-serif;
    font-size: 1.5em;
    padding-left: 30px;
    letter-spacing: .04em;
    font-weight: 500;
  }
  
  .topnav a {
    float: right;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 27px 30px 27px 30px;
    text-decoration: none;
    font-size: 1.25em;
    font-family: sans-serif;
  }
  
  .topnav a:hover {
    background-color: #ddd;
    color: black;
    transition: .5s;
  }
  
  .topnav a:active {
    background-color: #ddd;
    color: black;
  }
  
  .topnav .icon {
    display: none;
    font-size: 1.3em;
  }
  
  
  @media screen and (max-width: 640px) {
    .topnav a {display: none;}
    .topnav .icon {
      float: right;
      display: block;
      color: white;
      margin-right: 30px;
    }
  }
  
  @media screen and (max-width: 640px) {
    topnav.responsive {position: relative;}
    topnav.responsive a.icon {
      position: absolute;
      right: 0;
      top: 0;
    }
  
    topnav.responsive a {
      float: none;
      display: block;
      text-align: right;
    }
  }
  
  &lt;!-- JS --&gt;
  
  function myFunction() {
    var x = document.getElementById("myTopnav");
      if (x.className === "topnav") {
          x.className += " responsive";
      } else {
          x.className = "topnav";
      }
  </code></pre>
  
  <p>}</p>