title: Close nav on link click
body: <p>My nav closes when a user clicks the &quot;X&quot; or hits the esc key, I would like it to close when a user clicks a link as well. The nav is constructed as such;</p>
  <pre><code>&lt;div class=&quot;top-bar&quot;&gt;
          &lt;button class=&quot;top-bar__nav-toggle hamburger&quot; id=&quot;top-nav-toggle&quot;&gt;
            &lt;span&gt;&lt;/span&gt;
            &lt;span&gt;&lt;/span&gt;
            &lt;span&gt;&lt;/span&gt;
          &lt;/button&gt;
          &lt;nav class=&quot;top-bar__nav collapsed&quot; id=&quot;top-bar__nav&quot;&gt;
            &lt;ul class=&quot;top-bar__nav-list nav-ul&quot;&gt;
              &lt;li&gt;
                &lt;a class=&quot;navlink&quot; href=&quot;#&quot;&gt;Home&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;a class=&quot;navlink&quot; href=&quot;#Portfolio&quot;&gt;Work&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;a class=&quot;navlink&quot; href=&quot;#About&quot;&gt;About&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;a class=&quot;navlink&quot; href=&quot;#Contact&quot;&gt;Contact&lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/nav&gt;
        &lt;/div&gt;
  </code></pre>
  <p>is styled as such;</p>
  <pre><code>body {
    background: gray;
  }
  .top-bar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    margin-right: 2vw;
  }
  
  .top-bar__nav-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    display: none;
    font-size: 50px;
    min-width: 5vw;
    text-align: center;
    transition: 0.25s;
  }
  
  .hamburger {
    height: 4vw;
    position: relative;
  }
  
  .hamburger span {
    background: white;
    border-radius: 25%;
    height: 2px;
    position: absolute;
    transform: translate(-50%, -50%);
    width: 4vw;
  }
  
  .hamburger:focus span {
    background: rgb(91, 196, 221);
    outline: none;
  }
  
  .hamburger:hover span {
    background: rgb(91, 196, 221);
  }
  
  .hamburger span:nth-child(1) {
    top: 20%;
    transition: top 125ms 250ms, transform 125ms;
  }
  .hamburger span:nth-child(2) {
    top: 50%;
    transition: top 125ms 250ms, transform 125ms;
  }
  .hamburger span:nth-child(3) {
    top: 80%;
    transition: top 125ms 250ms, transform 125ms;
  }
  
  .hamburger.closed span:nth-child(1) {
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    transition: top 125ms, transform 125ms 250ms;
  }
  .hamburger.closed span:nth-child(2) {
    top: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    transition: top 125ms, transform 125ms 250ms;
  }
  .hamburger.closed span:nth-child(3) {
    top: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    transition: top 125ms, transform 125ms 250ms;
  }
  
  .nav-ul {
    display: flex;
    justify-content: center;
    list-style-type: none;
    padding: 0;
  }
  
  .top-bar__nav {
    background: transparent;
    max-height: 400px;
    overflow: hidden;
    transition: 0.25s;
    width: 100%;
  }
  
  .top-bar__nav.collapsed .top-bar__nav-list {
    transition: all ease-in-out 1s;
  }
  
  .top-bar__nav-list {
    list-style: none;
  }
  
  .top-bar__nav-list li {
    text-align: center;
  }
  
  .collapsed .top-bar__nav-list a {
    font-size: 2vw;
  }
  
  .top-bar__nav-list a {
    border-bottom: 2px solid transparent;
    color: white;
    display: inline-block;
    font-size: 6vw;
    padding-left: 3vw;
    text-decoration: none;
    transition: 0.25s;
  }
  
  .top-bar__nav-list a:hover {
    color: rgb(91, 196, 221);
  }
  
  .top-bar__nav-list a:focus {
    color: rgb(91, 196, 221);
    outline: none;
  }
  
  @media screen and (max-width: 500px) {
    .top-bar__nav-list {
      align-items: flex-end;
      background: white;
      flex-direction: column;
      height: 100%;
      max-height: 100%;
      overflow: hidden;
      padding-right: 4vw;
      position: fixed;
      transition: all ease-in-out 1s;
          -webkit-transform: translateZ(0);
      -moz-transform: translateZ(0);
      -ms-transform: translateZ(0);
      -o-transform: translateZ(0);
      transform: translateZ(0);
      right: 0;
      width: 100%;
    }
  
    .top-bar__nav.collapsed .top-bar__nav-list {
      max-height: 0;
    }
  
    .top-bar__nav-list.collapsed {
      padding-right: 6vw;
    }
  
    .nav-ul li a {
      color: gray;
    }
  
    .top-bar__nav-toggle {
      display: inline-block;
    body {
    background: gray;
  }
  .top-bar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    margin-right: 2vw;
  }
  
  .top-bar__nav-toggle {
    background: transparent;
    border: none;
    cursor: pointer;
    display: none;
    font-size: 50px;
    min-width: 5vw;
    text-align: center;
    transition: 0.25s;
  }
  
  .hamburger {
    height: 4vw;
    position: relative;
  }
  
  .hamburger span {
    background: white;
    border-radius: 25%;
    height: 2px;
    position: absolute;
    transform: translate(-50%, -50%);
    width: 4vw;
  }
  
  .hamburger:focus span {
    background: rgb(91, 196, 221);
    outline: none;
  }
  
  .hamburger:hover span {
    background: rgb(91, 196, 221);
  }
  
  .hamburger span:nth-child(1) {
    top: 20%;
    transition: top 125ms 250ms, transform 125ms;
  }
  .hamburger span:nth-child(2) {
    top: 50%;
    transition: top 125ms 250ms, transform 125ms;
  }
  .hamburger span:nth-child(3) {
    top: 80%;
    transition: top 125ms 250ms, transform 125ms;
  }
  
  .hamburger.closed span:nth-child(1) {
    top: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    transition: top 125ms, transform 125ms 250ms;
  }
  .hamburger.closed span:nth-child(2) {
    top: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    transition: top 125ms, transform 125ms 250ms;
  }
  .hamburger.closed span:nth-child(3) {
    top: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
    transition: top 125ms, transform 125ms 250ms;
  }
  
  .nav-ul {
    display: flex;
    justify-content: center;
    list-style-type: none;
    padding: 0;
  }
  
  .top-bar__nav {
    background: transparent;
    max-height: 400px;
    overflow: hidden;
    transition: 0.25s;
    width: 100%;
  }
  
  .top-bar__nav.collapsed .top-bar__nav-list {
    transition: all ease-in-out 1s;
  }
  
  .top-bar__nav-list {
    list-style: none;
  }
  
  .top-bar__nav-list li {
    text-align: center;
  }
  
  .collapsed .top-bar__nav-list a {
    font-size: 2vw;
  }
  
  .top-bar__nav-list a {
    border-bottom: 2px solid transparent;
    color: white;
    display: inline-block;
    font-size: 6vw;
    padding-left: 3vw;
    text-decoration: none;
    transition: 0.25s;
  }
  
  .top-bar__nav-list a:hover {
    color: rgb(91, 196, 221);
  }
  
  .top-bar__nav-list a:focus {
    color: rgb(91, 196, 221);
    outline: none;
  }
  
  @media screen and (max-width: 500px) {
    .top-bar__nav-list {
      align-items: flex-end;
      background: white;
      flex-direction: column;
      height: 100%;
      max-height: 100%;
      overflow: hidden;
      padding-right: 4vw;
      position: fixed;
      transition: all ease-in-out 1s;
          -webkit-transform: translateZ(0);
      -moz-transform: translateZ(0);
      -ms-transform: translateZ(0);
      -o-transform: translateZ(0);
      transform: translateZ(0);
      right: 0;
      width: 100%;
    }
  
    .top-bar__nav.collapsed .top-bar__nav-list {
      max-height: 0;
    }
  
    .top-bar__nav-list.collapsed {
      padding-right: 6vw;
    }
  
    .nav-ul li a {
      color: gray;
    }
  
    .top-bar__nav-toggle {
      display: inline-block;
    }
  </code></pre>
  <p>and its functionality comes from this code;</p>
  <pre><code>(function () {
    if (document.querySelector(&quot;#top-nav-toggle&quot;)) {
      var navToggle = document.querySelector(&quot;#top-nav-toggle&quot;);
  
      function watchNavClose(e) {
        var topNav = document.querySelector(&quot;.top-bar&quot;);
        if (!e.path.includes(topNav)) {
          openCloseNav();
          document.documentElement.removeEventListener(&quot;click&quot;, watchNavClose);
        }
      }
  
      function openCloseNav() {
        var navToggle = document.querySelector(&quot;#top-nav-toggle&quot;);
  
        if (!navToggle.classList.contains(&quot;closed&quot;)) {
          navToggle.classList.add(&quot;closed&quot;);
          document.querySelector(&quot;#top-bar__nav&quot;).classList.remove(&quot;collapsed&quot;);
          document.querySelector(&quot;html&quot;).addEventListener(&quot;click&quot;, watchNavClose);
          document.body.style.overflowY = 'hidden';
        } else {
          document.querySelector(&quot;#top-bar__nav&quot;).classList.add(&quot;collapsed&quot;);
          document.documentElement.removeEventListener(&quot;click&quot;, watchNavClose);
          document.body.style.overflowY = &quot;scroll&quot;;
          navToggle.classList.remove(&quot;closed&quot;);
          }
        }
  
        document.addEventListener('keydown', e =&gt; {
          if ( e.keyCode === 27 ) {
            document.documentElement.removeEventListener(&quot;click&quot;, watchNavClose);
            document.body.style.overflowY = &quot;scroll&quot;;
            navToggle.classList.remove(&quot;closed&quot;);
            document.querySelector(&quot;#top-bar__nav&quot;).classList.add(&quot;collapsed&quot;);
          }
        })
  
        navToggle.addEventListener(&quot;click&quot;, openCloseNav);
    }
  })
  
  ();
  </code></pre>
  <p>I am mostly building through tutorials and such and I have tried figuring it out through similar questions here, but I am new to this and couldn't figure out how to translate it to my code. Any help is appreciated.</p>