title: Javascript & CSS Hamburger menu working in Codepen but not when deployed
body: <p>I have created a portfolio website and it is now complete. The only thing not working is the menu does not close when a link is clicked, I have added Javascript and tested it in Codepen where is works. When I add it to the GitHub directory it doesn't work on the live site.</p>
  <p><a href="https://github.com/babyblueprojects/personal-portfolio/blob/master/assets/js/menu.js" rel="nofollow noreferrer">Github Repository</a></p>
  <p><a href="https://codepen.io/babyblueprojects/pen/qBZGZeJ" rel="nofollow noreferrer">Codepen Example</a></p>
  <p>Below is the working Codepen example:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var checkbox = document.querySelector( '#myInput' );
  var icon = document.querySelector( '#menuToggle span' );
  var listener = function( e ) {
    if( e.target != checkbox &amp;&amp; e.target != icon ) {
      checkbox.checked = false;
      document.removeEventListener( 'click', listener );
    }
  };
  
  checkbox.addEventListener( 'click', function(){
    if( this.checked ) {
      document.addEventListener( 'click', listener );
    } 
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* Mobile Menu */
  body {
    background: #b0c0c6;
  }
  
  #menuToggle {
    display: block;
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 1; 
    -webkit-user-select: none;
    user-select: none;
    padding: 6px 4px 1.5px 4px;
  }
  
  #menuToggle a {
    text-decoration: none;
    color: #232323;
    transition: color 0.3s ease;
  }
  
  #menuToggle a:hover {
    color: tomato;
  }
  
  
  #menuToggle input
  {
    display: block;
    width: 40px;
    height: 32px;
    position: absolute;
    top: -7px;
    left: -5px;
    cursor: pointer;
    opacity: 0; /* hide this */
    z-index: 2; /* and place it over the hamburger */
    -webkit-touch-callout: none;
  }
  
  #menuToggle span {
    display: block;
    width: 33px;
    height: 4px;
    margin-bottom: 5px;
    position: relative;
    background: black;
    border-radius: 1px;
    z-index: 1;
    transform-origin: 4px 0px;
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                opacity 0.55s ease;
  }
  
  #menuToggle span:first-child
  {
    transform-origin: 0% 0%;
  }
  
  #menuToggle span:nth-last-child(2)
  {
    transform-origin: 0% 100%;
  }
  
  #menuToggle input:checked ~ span
  {
    opacity: 1;
    transform: rotate(45deg) translate(-2px, -1px);
    background: #13aff0;
  }
  
  #menuToggle input:checked ~ span:nth-last-child(3)
  {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
  }
  
  #menuToggle input:checked ~ span:nth-last-child(2)
  {
    transform: rotate(-45deg) translate(0, -1px);
  }
  
  .mobilemenu {
    width: 100%;
    margin: -80px 0 0 -30px;
    padding: 50px;
    padding-top: 75px;
    padding-bottom: 20px;
    background: rgb(241,228,219,1);
    list-style-type: none;
    -webkit-font-smoothing: antialiased;  
    transform-origin: 0% 0%;
    transform: translate(-100%, 0);
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    position: fixed;
    vertical-align: middle;
  }
  
  .mobilemenu li
  {
    padding: 10px 0;
    padding-left: 20px;
    font-size: 22px;
    border-bottom: solid 1px;
  }
  
  #menuToggle input:checked ~ ul
  {
    transform: none;
  }
  
  /* Mobile Menu */</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav role="navigation"&gt;
    &lt;div id="menuToggle"&gt;
      &lt;input type="checkbox" id="myInput"/&gt;
      &lt;span&gt;&lt;/span&gt;
      &lt;span&gt;&lt;/span&gt;
      &lt;span&gt;&lt;/span&gt;
      &lt;ul class="mobilemenu"&gt;
        &lt;li&gt;&lt;a href="#about" class="active"&gt;About Me&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#experience"&gt;Experience&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#projects"&gt;Projects&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#skills"&gt;Skills&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#education"&gt;Education&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#footer"&gt;Contact Me&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#résumé"&gt;Résumé&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/nav&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Any help or tips appreciated.</p>