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:

      <div class="myNav" >
      <div id="myNavigation">
        <a class="active" href="#intro">
          &#60Mr. Chand&#62
        </a>
        <a href="#about">About Me</a>
        <a href="#skills">Skills</a>
        <a href="#exp">Experiences</a>
        <a href="#project">Projects</a>
        <a href="#contact">Contact Me</a>
        <a href="javascript:void(0);" class="icon" onclick="navFunction()">
          <i class="fa fa-bars"></i>
        </a>
        </div>
  </div>

The CSS 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;
}

The Responsive CSS Code (max width:600px)

.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;
}

The JavaScript code

function navFunction() {
 var x = document.getElementById("myNavigation");
 if (x.className === "myNav") {
   x.className += "responsive";
 } 
 else {
   x.className = "myNav";
 }

}