I have a menu that converts to a dropdown menu for small/portrait screens. It works great except for when the user opens and closes the dropdown menu in portrait, then rotates the device, at which point the menu disappears completely. It seems like the "display: none" for the menu in the javascript function's first condition is overriding the css, but the css is overriding "display: block" for the menu icon? Any !important tag I've tried to add has broken everything, and adding another media query for larger screens to reiterate that the menu should display as flex did nothing.

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;
    }
}