Es la primera vez que publico una pregunta aquí, así que por favor sea amable :)

Agregué el siguiente script para cambiar el css de mi barra de navegación al desplazarme.

 window.addEventListener("scroll", function () { let header = document.querySelector(".navbar"); let windowPosition = window.scrollY > 0; header.classList.toggle("change-bg-nav", windowPosition);});

Este es el CSS para la clase.

 .change-bg-nav { box-shadow: var(--box-shadow); background-color: rgb(255, 255, 255, 0.9) !important; backdrop-filter: blur(5.5px);}

El efecto funciona muy bien, cuando me desplazo en cualquier tamaño de dispositivo, el css de la barra de navegación cambia como se esperaba. Ahora estoy buscando lograr el mismo efecto cuando estoy en un dispositivo más pequeño y hago clic en el ícono de la hamburguesa para expandir el menú ** pero sin desplazarme **. He probado mediaqueries pero eso no me da el resultado deseado. ¿Alguna sugerencia sobre cómo abordar esto?

El código de mi navegador.

 <nav class="navbar navbar-expand-lg navbar-light bg-light px-3 mb-5"> <div class="container-fluid"> <a class="navbar-brand" href="/">Brand name</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <div class="navbar-nav ms-auto"> <a class="nav-link active" aria-current="page" href="/">Home</a> <a class="nav-link" href="/about.html">About</a> <a class="nav-link" href="/about.html#contact-me">Contact</a> </div> <div class="navbar-nav social-media"> <a href="#" target="_blank" class="nav-link social"><i class="fab fa-twitter px-1"></i></a> <a href="#" target="_blank" class="nav-link social"><i class="fab fa-linkedin-in px-1"></i ></a> </div> </div> </div> </nav>