How do I ensure that my media query sidebar nav closes without affect my main nav menu

In my max-width:320px media query I have a sidebar navigation as oppose to the regular normal bar that is in the other max-width’s. now the problem I’m experiencing is that every time I close my sidebar nav in max-width:320px. the regular menu in the largest width:1440px is removed because the browser’s element style is set to “display:none”. How do I get around this, close my sidebar nav without removing main nav in the other width?

html

 <div id="mynavbar" class="navbar">
        <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
        <div class="logo">
          <img src="{% static 'TheMachine Images/The Machine 2.png' %}" alt="">
        </div>
        <span class="HOME">HOME</span>
        <span class="ARTIST">ARTIST</span>
        <span class="ABOUTUS">ABOUT US</span>
        <div class="search-bar">
          <textarea name="" placeholder="Search" id="search-area" cols="16" rows="1"></textarea>
          <div class="search-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi-search" viewBox="0 0 16 16">
              <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"/>
            </svg>
          </div>
        </div>
          <div class="rec">
            <span class="SignIn">SignIN</span>
          </div>
          <div class="rec2">
            <span class="SignUP">SignUp</span>
          </div>
          <span class="nav-menu" style="font-size: 17px; cursor:pointer" onclick="openNav()">&#9776;OPEN</span>

          <script>
            function openNav() {
              document.getElementById("mynavbar").style.display = "block";
            }
            function closeNav() {
              document.getElementById("mynavbar").style.display = "none";
            }
          </script>
      </div>

Navbar css

.navbar{
    position: absolute;
    height: 91px;
    width: 1094px !important;
    left: 152px;
    top: 46px;
    border-radius: 0px;
}

Navbar css (max-width:320px)

.navbar{
        height: 100%;
        width: 250px !important;
        position: fixed;
        z-index: 1;
        top: 0;
        left: 0;
        background-color: #111;
        overflow-x: hidden;
        padding-top: 60px;
    }
    .navbar a{
        padding: 8px 8px 8px 32px;
        text-decoration: none;
        font-size: 25px;
        color: #818181;
        display: block;
    }
    .navbar a:hover{
        color: #f1f1f1;
    }
    .closebtn{
        position: absolute;
        top: 0;
        right: 25px;
        font-size: 36px;
        margin-left: 50px;
    }
    .nav-menu{
        display: block;
        z-index: auto;
    }