Tengo una página web simple en la que tengo una barra de navegación encerrada en etiquetas de navegación. Utilizo una consulta de medios para ocultar esta barra de navegación cuando la ventana gráfica tiene menos de 700 px de ancho (configurando la visualización: ninguno para la etiqueta de navegación en CSS), y para mostrar esta barra de navegación cuando la ventana gráfica tiene 700 px de ancho o más (configurando la visualización : bloque para la etiqueta de navegación en CSS). Esto funciona exactamente como quiero cuando cargo inicialmente mi página. Puedo cambiar el tamaño de la ventana gráfica tantas veces como quiera y ver el efecto deseado (desaparecer y reaparecer de la barra de navegación) cada vez.
También tengo algo de javascript en esta página. Primero, obtengo una referencia al elemento de navegación de la siguiente manera:
const mynav = document.querySelector('nav');Cuando la barra de navegación está oculta, al hacer clic en un botón, se ejecuta el siguiente código para mostrar la barra de navegación:
mynav.style.display = 'block';Después de que la barra de navegación se haya mostrado usando javascript, al hacer clic en el mismo botón, se ejecuta el siguiente código para ocultar la barra de navegación:
mynav.style.display = 'none';Este javascript está funcionando como esperaba, excepto por un problema. Después de usar JavaScript para mostrar y luego ocultar la barra de navegación de esta manera, la barra de navegación permanece oculta a partir de ese momento sin importar lo que haga. Parece que configurar display = none en javascript tiene prioridad sobre mi CSS en mi consulta de medios, por lo que si hago que mi ventana gráfica sea más grande nuevamente, no puedo hacer que vuelva a aparecer la barra de navegación.
Si alguien aquí puede decirme si hay alguna manera de que pueda hacer que el efecto de mi javascript sea "temporal" de manera que después de que se ejecute, ¿el CSS en mi consulta de medios seguirá funcionando?
Cualquier consejo o sugerencia será muy apreciada.
Gracias de antemano, Pablo