Conflict with visibility between CSS and javascript

1

Setting nav menu visibility on javascript based on rotation of icon, works fine, however…when I try to set the menu to be always visibly based on screen width from CSS it does not override the property I set in js. Any ideas why? Code below (needs an icon … use anything u have handy)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>test page</title>

    <style>
      nav {
        display: flex;
        align-items: center;
        height: 100%;
      }

      #nav-icon {
        display: block;
        position: absolute;
        top: 10px;
        right: 20px;
        height: 40px;
        width: auto;
      }

      #nav-menu {
        display: flex;
        flex-flow: column nowrap;
        position: absolute;
        top: 60px;
        right: 0;
        padding-right: 2vw;
        padding-left: 8px;
        background-color: darkcyan;

        & a {
          font-family: "Quicksand", sans-serif;
          text-decoration: none;
          color: black;
          font-weight: 400;

          font-size: 18px;
          padding-left: 32px;
          padding-right: 52px;
          line-height: 50px;
        }
      }

      @media only screen and (min-width: 600px) {
        #nav-icon {
          visibility: hidden;
        }
        #nav-menu {
          visibility: visible;
        }
      }

      @media only screen and (max-width: 599px) {
        #nav-icon {
          visibility:  visible;
        }
      }
    </style>
  </head>

  <body>
    <nav>
      <img id="nav-icon" src="/images/common/nav-menu.svg" height="35" width="35" alt="Nav Icon" onclick="rotate_nav_icon()" />
      <ul id="nav-menu">
        <a href="">item one</a>
        <a href="">item two</a>
        <a href="">item three</a>
      </ul>
    </nav>
  </body>

  <script>
    function rotate_nav_icon() {
      const myIcon = document.getElementById("nav-icon");
      const menu = document.getElementById("nav-menu");

      const angle = 90;

      if (typeof rotation == "undefined") {
        rotation = 0;
      }

      rotation = (rotation + angle) % 360;

      myIcon.style.transform = `rotate(${rotation}deg)`;

      if (rotation == 90 || rotation == 270) {
        menu.style.visibility = "hidden";
      } else {
        menu.style.visibility = "visible";
      }
    }
  </script>
</html>
2

the style you set with JS has precedence. Maybe you want to make that JS apply only above a certain viewport width?