How do I get the open element in my side nav menu to not dissappear after my nav is closed-CodePudding

I put a side nav menu with the code that I got from www.w3school.com but the problem with my side nav menu. when I close it the open element is not visible or accessible unlike in the www.w3school.com . how do I get around this?

function openNav() {
  document.getElementById("mySidenav").style.display = "block";
}

function closeNav() {
  document.getElementById("mySidenav").style.display = "none";
}

body {
  font-family: "Lato", sans-serif;
}

.sidenav {
  display: none;
  height: 100%;
  width: 250px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 60px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<div id="mySidenav" >
  <a href="javascript:void(0)"  onclick="closeNav()">&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

<h2>Sidenav Example</h2>
<p>Click on the element below to open the side navigation menu.</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span>
   
</body>
</html>

this my side nav

function openNav() {
      document.getElementById("mynavbar").style.display = "block";
    }

function closeNav() {
      document.getElementById("mynavbar").style.display = "none";
    }

.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;
}
.nav-remove a:hover {
  color: #f1f1f1;
}
.closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
.nav-menu {
  display: block;
  z-index: auto;
}

<div id="mynavbar" >
      <a href="javascript:void(0)"  onclick="closeNav()">&times;</a>
      <div >
        <img src="{% static 'TheMachine Images/The Machine 2.png' %}" alt="">
      </div>
      <span >HOME</span>
      <span >ARTIST</span>
      <span >ABOUT US</span>
      <div >
        <textarea name="" placeholder="Search" id="search-area" cols="16" rows="1"></textarea>
        <div >
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"  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 >
        <span >SignIN</span>
      </div>
      <div >
        <span >SignUp</span>
      </div>
      <span  style="font-size: 17px; cursor:pointer" onclick="openNav()">&#9776;OPEN</span>


    </div>

as you can see the open is not visible like in the first example. I need it to be there so I can open the menu.

CodePudding user response：

It is because your "open-span" is inside of the navigation you are hiding with js. move it to the outside of the #mynavbar div so it stays visible.

Code:

function openNav() {
  document.getElementById("mynavbar").style.display = "block";
}

function closeNav() {
  document.getElementById("mynavbar").style.display = "none";
}

.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;
}
.nav-remove a:hover {
  color: #f1f1f1;
}
.closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
.nav-menu {
  display: block;
  z-index: auto;
}

<div id="mynavbar" >
  <a href="javascript:void(0)"  onclick="closeNav()">&times;</a>
  <div >
    <img src="{% static 'TheMachine Images/The Machine 2.png' %}" alt="">
  </div>
  <span >HOME</span>
  <span >ARTIST</span>
  <span >ABOUT US</span>
  <div >
    <textarea name="" placeholder="Search" id="search-area" cols="16" rows="1"></textarea>
    <div >
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"  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 >
    <span >SignIN</span>
  </div>
  <div >
    <span >SignUp</span>
  </div>

</div>
<span  style="font-size: 17px; cursor:pointer" onclick="openNav()">&#9776;OPEN</span>