I am currently making a website with a fixed menu on top. When the page get's resized to the point where that menu don't fit, a new dropdown menu appear to take it's place. In order to open and close said dropdown menu you have to click a button with the following onclick JavaScript function:

function showMenu() {
    var mb = document.getElementById("menu-bar");

    if (mb.style.height != "505px") {
        mb.style.height = "505px";
    } else {
        mb.style.height = "70px";
    }
}

the issue I am having is when/if the user were to resize the page to the point where the button disapear while the dropdown menu is still open. My first thought was to change the menu-bar height using @media screen like this:

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

but due to the JavaScript already controlling the height of the menu-bar this doesn't work. Is there any other way I can achieve this?