title: Dropdown of the navigation bar is not loading during responsive design
body: <p>My navigation bar is not working in mobile screen size. When I clicked on the hamburger icon it shifts downwards and again on clicking it comes up but the navbar never opens. Earlier the JavaScript code works when I included it internally but now it doesn't work at all. Please someone help. Really stuck here.
  The HTML Code:</p>
  <pre><code>      &lt;div class=&quot;myNav&quot; &gt;
        &lt;div id=&quot;myNavigation&quot;&gt;
          &lt;a class=&quot;active&quot; href=&quot;#intro&quot;&gt;
            &amp;#60Mr. Chand&amp;#62
          &lt;/a&gt;
          &lt;a href=&quot;#about&quot;&gt;About Me&lt;/a&gt;
          &lt;a href=&quot;#skills&quot;&gt;Skills&lt;/a&gt;
          &lt;a href=&quot;#exp&quot;&gt;Experiences&lt;/a&gt;
          &lt;a href=&quot;#project&quot;&gt;Projects&lt;/a&gt;
          &lt;a href=&quot;#contact&quot;&gt;Contact Me&lt;/a&gt;
          &lt;a href=&quot;javascript:void(0);&quot; class=&quot;icon&quot; onclick=&quot;navFunction()&quot;&gt;
            &lt;i class=&quot;fa fa-bars&quot;&gt;&lt;/i&gt;
          &lt;/a&gt;
          &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  <p>The CSS Code:</p>
  <pre><code>.myNav {
    position: fixed;
    display: inline;
    width: 100%;
    overflow: hidden;
    font-size: 20rem;
    z-index: 10;
    padding: 15rem 0rem 0rem 0rem;
    margin: 20rem 0rem 0rem 0rem;
  }
  .myNav .max-width{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .myNav a.active {
    float: left;
    margin: 15rem 300rem 0rem 0rem;
    color: #00cf5d;
  }
  .myNav a {
    float: left;
    color: white;
    text-align: center;
    margin: 15rem 50rem 0rem 0rem;
  }
  .myNav .icon {
    display: none;
  }
  .myNav .menu li .chand{
    margin: 0rem 350rem 0rem 0rem;
  }
  </code></pre>
  <p>The Responsive CSS Code (max width:600px)</p>
  <pre><code>.myNav a:not(:first-child) {
     display: none;
  }
  .myNav a {
     background-color: #0A0A0A;
     color: #00cf5d;
     opacity: 83%;
  }
  .myNav a.icon {
      float: right;
      display: block;
      font-size: 30rem;
      text-decoration: none;
  }
  
  .myNav .responsive {
     position: relative;
  }
  .myNav .responsive a.icon {
     position: absolute;
     right: 0;
     top: 0; 
  }
  .myNav .responsive a {
     float: none;
     display: block;
     text-align: center;
     text-decoration: none;
  }
  </code></pre>
  <p>The JavaScript code</p>
  <pre><code>function navFunction() {
   var x = document.getElementById(&quot;myNavigation&quot;);
   if (x.className === &quot;myNav&quot;) {
     x.className += &quot;responsive&quot;;
   } 
   else {
     x.className = &quot;myNav&quot;;
   }
  </code></pre>
  <p>}</p>