Mi barra de navegación no funciona en el tamaño de pantalla móvil. Cuando hice clic en el ícono de la hamburguesa, se desplaza hacia abajo y nuevamente al hacer clic aparece, pero la barra de navegación nunca se abre. Anteriormente, el código JavaScript funcionaba cuando lo incluía internamente, pero ahora no funciona en absoluto. Por favor alguien ayuda Realmente atrapado aquí. El código HTML:

 <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>

El código CSS:

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

El código CSS receptivo (ancho máximo: 600 px)

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

El código JavaScript

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

}