Tengo un menú que se convierte en un menú desplegable para pantallas pequeñas/verticales. Funciona muy bien, excepto cuando el usuario abre y cierra el menú desplegable en vertical, luego gira el dispositivo, momento en el que el menú desaparece por completo. Parece que la "pantalla: ninguno" para el menú en la primera condición de la función javascript está anulando el css, pero el css está anulando "pantalla: bloque" para el icono del menú. ¡Cualquier etiqueta importante que he intentado agregar ha roto todo, y agregar otra consulta de medios para pantallas más grandes para reiterar que el menú debería mostrarse como flex no hizo nada.

HTML:

 <div id="nav-wrapper"> <div id="topnav"> <a href="about">About</a> <a href="releases">Releases</a> <a href="artists">Artists</a> <a href="studio">Studio</a> <a href="events">Events</a> <a href="contact">Contact</a> </div> <a href="javascript:void(0);" class="icon" onclick="toggle()"> <img id="menu" src="images/menu.png"> <img id="x" src="images/x.png"> </a> </div>

JS:

 function toggle() { var x = document.getElementById("nav-wrapper"); if (x.children[0].style.display === "flex") { x.children[0].style.display = "none"; x.children[1].children[1].style.display = "none"; x.children[1].children[0].style.display = "block"; } else { x.children[0].style.display = "flex"; x.children[1].children[1].style.display = "block"; x.children[1].children[0].style.display = "none"; } }

CSS:

 #topnav { display: flex; position: fixed; right: 6%; width: 50%; justify-content: space-between; align-items: center; height: 10vh; overflow: hidden; z-index: 400; } #nav-wrapper a.icon { display:none; } #x { display: none; width: 5vw; } @media (max-width: 500px) { #topnav { display: none; width: 100%; height: 90vh; bottom: 0; flex-direction: column; justify-content: space-evenly; right:0; background-color: rgba(0, 0, 0, 0.90); } } #nav-wrapper a.icon { display: block; position: fixed; right: 5vw; top: 4vh; z-index: 1000; } }