title: Navigation menu to Burger Menu
body: <p>I am trying to make my nav bar menu responsive.
  I tried to implement it through several ways but the burger button I am not able to click on it.
  I start to think maybe I need to like a jquery link or make sure of the node in my machine .</p>
  <p>This is the HTML :</p>
  <blockquote>
    
  <pre><code>&lt;meta charset=&quot;UTF-8&quot;&gt;
  &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot;&gt;
  &lt;title&gt;Showpra&lt;/title&gt; &lt;/head&gt; &lt;body&gt;
  &lt;nav class=&quot;main-nav&quot;&gt;
      &lt;div class=&quot;logo&quot;&gt;Nav&lt;/div&gt;
      &lt;ul class=&quot;nav-links&quot;&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Connect&lt;/a&gt;&lt;/li&gt;
     &lt;/ul&gt;
     &lt;div class=&quot;burger&quot;&gt;
          &lt;div class=&quot;line line1&quot;&gt;&lt;/div&gt;
          &lt;div class=&quot;line line2&quot;&gt;&lt;/div&gt;
          &lt;div class=&quot;line line3&quot;&gt;&lt;/div&gt;
     &lt;/div&gt;
  &lt;/nav&gt;
  
      
  &lt;scrip src=&quot;script.js&quot;&gt;&lt;/scrip&gt;
  &lt;script src=&quot;https://code.jquery.com/jquery-2.1.4.js&quot;&gt;&lt;/script&gt; &lt;/body&gt; &lt;/html&gt;
  </code></pre>
  </blockquote>
  <p>This is the CSS :</p>
  <pre><code>        @import url('https://fonts.googleapis.com/css2?family=Muli&amp;display=swap');
  
  * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
  }
  
  nav{
      display: flex;
      justify-content: space-around;
      align-items: center;
      min-height: 8vh;
      background-color: #444;
      font-family: 'Muli', sans-serif;
  }
  
  .logo
  {
      color: white;
      text-transform: uppercase;
      letter-spacing: 5px;
      font-size: 20px;
  }
  
  .nav-links {
      display: flex;
      background-color: coral;
      justify-content: space-around;
      width: 30%
  }
  
  .nav-links li {
      list-style: none;
  }
  
  
  .nav-links a{
      color:cyan;
      text-decoration: none;
      letter-spacing: 3px;
      font-weight: bold;
      font-size: 14px;
  }
  
  .burger{
      display: none;
      cursor: pointer;
  }
  
  .burger div{
      width:25px;
      height: 5px;
      background-color: white;
      margin: 5px;
      transition: all 0.3s ease;
  }
  
  @media screen and (max-width:768px){
  
      body {
          overflow-x: hidden;
      }
     .nav-links {
         position: absolute;
         right: 50%; 
         height: 92vh; 
         top: 8vh;
         background-color: coral;
         display: flex;
         flex-direction: column;
         align-items: center;
         width: 50%;
         transform: translateX(100%);
         transition: transform 0.5s ease-in;
  
      }
  
      .nav-links li{
          opacity: 10;
      }
  
      .burger {
          display: block;
      }
     }
  
    .nav-active {
         transform: translateX(0%);
     }
  
     @keyframes navLinkFade {
         from {
             opacity: 0;
             transform: translateX(50px);
         }
  
         to {
             opacity: 1;
             transform: translateX(0px);
         }
     }
  
  .toggle .line1 {
      transform: rotate(-45deg) traslate(-5px, 6px);
  }
  
  .toggle .line2 {
         opacity: 0;
  }
  
  .toggle .line3 {
      transform: rotate(45deg) traslate(-5px, 6px);  
  }
  </code></pre>
  <blockquote>
  <pre><code>This is the javaScript :
  
          document.addEventListener('DOMContentLoaded', nav)
      function nav(){
          const burger = document.querySelector('.burger');
          const nav = document.querySelector('.main-nav');
          burger.addEventListener('click', ()=&gt;{
              nav.classList.toggle('show')
          })
      }
  </code></pre>
  </blockquote>
  <p>What do you think is the problem</p>