Actualmente estoy haciendo un sitio web con un menú fijo en la parte superior. Cuando la página cambia de tamaño hasta el punto en que ese menú no cabe, aparece un nuevo menú desplegable para ocupar su lugar. Para abrir y cerrar dicho menú desplegable, debe hacer clic en un botón con la siguiente función JavaScript onclick:

 function showMenu() { var mb = document.getElementById("menu-bar"); if (mb.style.height != "505px") { mb.style.height = "505px"; } else { mb.style.height = "70px"; } }

el problema que tengo es cuándo / si el usuario cambiara el tamaño de la página hasta el punto en que el botón desaparezca mientras el menú desplegable aún está abierto. Mi primer pensamiento fue cambiar la altura de la barra de menú usando la pantalla @media de esta manera:

 @media screen and (min-width: 1301px) { #menu-bar { height: 70px; } }

pero debido a que JavaScript ya controla la altura de la barra de menú, esto no funciona. ¿Hay alguna otra manera en que pueda lograr esto?