Hice este código al ver un sitio web dev.to, codifiqué todas y cada una de las líneas del código utilizado en ese proyecto, pero aún así, mi botón de alternar no funciona correctamente. no sé por qué si es posible, alguien explique esa etiqueta de intervalo en mi código con el código javascript.

 <style> @media only screen and (max-width: 768px) { .hamburger .bar:nth-child(2) { opacity: 0; } .hamburger .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); } .hamburger .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } } </style> <header class="header"> <nav class="navbar"> <a href="#" class="nav-logo">jerome</a> <ul class="nav-menu"> <li class="nav-item"><a href="#" class="nav-link">home</a></li> <li class="nav-item"><a href="#" class="nav-link">About</a></li> <li class="nav-item"><a href="#" class="nav-link">Contact</a></li> <li class="nav-item"><a href="#" class="nav-link">services</a></li> </ul> <div class="humburger"> <span class="bar"></span> <span class="bar"></span> <span class="bar"></span> </div> </nav> </header> <script> const hamburger = document.querySelector(".hamburger"); const navMenu = document.querySelector(".nav-menu"); hamburger.addEventListener('click', mobileMenu); function mobileMenu() { hamburger.classList.toggle("active"); navMenu.classList.toggle("active"); }```