title: Auto close navbar after click on link responsive mode
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>I add also my CSS code of navbar, all is working well, only I need is auto close when click on link 
  /* navbar */
  
  nav{
    height: 4rem;
    width: 100vw;
    background-color: #efefef;
    box-shadow: 0 3px 20px rgba(0, 0, 0, 0.2);
    display: flex;
    position: fixed;
    z-index: 10;
  
  }
  
  
  
  /*Styling logo*/
  /* .logo{
    padding:1vh 1vw;
    text-align: center;
  }
  .logo img {
    height: 5rem;
    width: 5rem;
  } */
  
  
  /*Styling Links*/
  .nav-list{
    display: flex;
    list-style: none; 
    width: 80vw;
    padding: 0 0.7vw;
    justify-content:center;
    align-items: center;
    margin: 0 auto;
    text-transform: uppercase;
  }
  
  .nav-list li a{
    text-decoration: none;
    margin: 0 1em;
    color: #000;
    font-weight: 600;
  }
  .nav-list li a:hover {
    color: #1abc9c;
  }
  .nav-list li {
    position: relative;
    color: #000;
  }
  .nav-list li a::before {
    content: "";
    display: block;
    height: 3px;
    width: 0%;
    background-color: #1abc9c;
    position: absolute;
    transition: all ease-in-out 250ms;
    margin: 0 0 0 10%;
  }
  .nav-list li a:hover::before{
    width: 80%;
  }
  
  
  
  
  /*Styling Hamburger Icon*/
  .hamburger div{
    width: 30px;
    height:3px;
    background: #000;
    margin: 5px;
    transition: all 0.3s ease;
  }
  .hamburger{
    display: none;
  }
  
  /*Stying for small screens*/
  @media screen and (max-width: 800px){
    nav{
        position: fixed;
        z-index: 3;
  
    }
    .hamburger{
        display:block;
        position: absolute;
        cursor: pointer;
        right: 5%;
        top: 50%;
        transform: translate(-5%, -50%);
        z-index: 2;
        transition: all 0.7s ease;
    }
    .nav-list {
        position: fixed;
        background: #efefef;
        height: 100vh;
        width: 100%;
        flex-direction: column;
        clip-path: circle(50px at 90% -20%);
        -webkit-clip-path: circle(50px at 90% -10%);
        transition: all 1s ease-out;
        pointer-events: none;
       
    }
  
    
    .nav-list.open{
        clip-path: circle(1000px at 90% -10%);
        -webkit-clip-path: circle(1000px at 90% -10%);
        pointer-events: all;
  
    }
  
    .nav-list li{
        opacity: 0;
        margin-top: 3em;
    }
    .nav-list li:nth-child(1){
        transition: all 0.5s ease 0.2s;
    }
    .nav-list li:nth-child(2){
        transition: all 0.5s ease 0.4s;
    }
    .nav-list li:nth-child(3){
        transition: all 0.5s ease 0.6s;
    }
    .nav-list li:nth-child(4){
        transition: all 0.5s ease 0.7s;
    }
    .nav-list li:nth-child(5){
        transition: all 0.5s ease 0.8s;
    }
    .nav-list li:nth-child(6){
        transition: all 0.5s ease 0.9s;
        margin: 0;
    }
    .nav-list li:nth-child(7){
        transition: all 0.5s ease 1s;
        margin: 0;
    }
    li.fejd{
        opacity: 1;
    }
  }
  /*Animating Hamburger Icon on Click*/
  .toggle .line1{
    transform: rotate(-45deg) translate(-5px,6px);
  }
  .toggle .line2{
    transition: all 0.7s ease;
    width:0;
  }
  .toggle .line3{
    transform: rotate(45deg) translate(-5px,-6px);
  }
  
  
  /* /navbar end */</code></pre>
  </div>
  </div>
  </p>
  <p>I would like to close navbar when a user clicks on link in responsive mode. I have tried a few examples but it doesn't work for me. Thank you very much!</p>
  <pre><code>&lt;nav class=&quot;navBar&quot; id=&quot;navbar&quot;&gt;
        &lt;div class=&quot;hamburger&quot;&gt;
            &lt;div class=&quot;line1&quot;&gt;&lt;/div&gt;
            &lt;div class=&quot;line2&quot;&gt;&lt;/div&gt;
            &lt;div class=&quot;line3&quot;&gt;&lt;/div&gt;
       &lt;/div&gt;`
   
  
  
        &lt;ul class=&quot;nav-list&quot; id=&quot;menu&quot;&gt;
              &lt;li&gt;&lt;a href=&quot;#&quot; class=&quot;nav-item&quot;&gt;Accueil&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=&quot;#parents&quot; class=&quot;nav-item&quot;&gt;Parents&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=&quot;#about-section&quot; class=&quot;nav-item&quot;&gt;A propos&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href=&quot;#contact&quot; class=&quot;nav-item&quot;&gt;Temoignagez&lt;/a&gt;&lt;/li&gt;
     &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  <p>This is my js code. All is working well! I only need to close nav when an user clicks on links
  // navbar</p>
  <pre><code>const hamburger = document.querySelector(&quot;.hamburger&quot;);
  const navLinks = document.querySelector(&quot;.nav-list&quot;);
  const links = document.querySelectorAll(&quot;.nav-list li&quot;);
  
  hamburger.addEventListener('click', ()=&gt;{
     //Animate Links
      navLinks.classList.toggle(&quot;open&quot;);
      links.forEach(link =&gt; {
          link.classList.toggle(&quot;fejd&quot;);
          
      });
  
      //Hamburger Animation
      hamburger.classList.toggle(&quot;toggle&quot;);
  });
  
  const navToggle = document.getElementById('nav-toggle');
  const navLink = document.querySelectorAll('.navLink').parentElement;
  
  navToggle.addEventListener('click', () =&gt; {
      document.body.classList.toggle('nav-open');
      
  });
  
  
   &lt;/script&gt;
  </code></pre>