What i intend to do is that i want to add a class to the nav by clicking at the hamburguer-menu icon. Then i want to remove that class by clicking at the close icon.
Could anyone tell me why is this not working?
HTML:
<nav class="nav container" id="nav">
<h2 class="nav_logo"><a href="#logo">DaniStor</a></h2>
<ul class="nav_links">
<li><a href="#sobre-mi" class="nav_sobre-mi">Sobre mí</a></li>
<li><a href="#habilidades" class="nav_conocimiento link">Habilidades</a></li>
<li><a href="#proyectos" class="nav_proyectos link">Proyectos</a></li>
<!-- <li><a href="#contacto" class="nav_contacto">Contacto</a></li> -->
</ul>
<div class="nav_idiomas">
<div class="idioma español">
<img src="portafolio-es/img/español.png">
</div>
<div class="idioma english">
<a href="portafolio-en/index.html">
<img src="portafolio-en/img/english.png">
</a>
</div>
</div>
<!--MENU HAMBURGUESA-->
<a href="#nav" class="nav_hamburguer" onclick="clickOpen()">
<i class="fa-solid fa-bars nav_icon"></i>
</a>
<a href="#" class="nav_close" onclick="clickClose()">
<i class="fa-solid fa-x nav_icon"></i>
</a>
</nav>
JS:
function clickOpen() {
const nav = document.querySelector('nav');
nav.classList.add('open');
}
function clickClose() {
const nav = document.querySelector('nav');
nav.classList.remove('open');
}