All the buttons in my menu stopped working when I added movement to it

Issue

So I was making a site and adding a menu but when I tried to add the close menu button all the menu buttons stopped working Here is the HTML

<div id="openMenuButton">
      <span style= "font-size:30px;cursor:pointer"
        onclick="openMenu()">&#9776; Menu
      </span>
    </div>
        <div id="menu">
        <div id="closebtn">
          <span style= "font-size:36px;cursor:pointer"
            onclick="closeMenu()">&times; Close
          </span>
        </div>
          <div id="menu-items">
              <a href="/" class="menu-item">Home</a>
              <a href="games/" class="menu-item">Games</a>
              <a href="/" class="menu-item">About</a>
              <a href="/" class="menu-item">Contact Us</a>
          </div>
          <div id="menu-background-pattern"></div>
      </div>

And now the CSS

body {
  background-color: rgb(20, 20, 20);
  margin: 0px;
}

#menu {
  height:100%;
  width: 0;
  position: fixed;
  background-color: rgb(20, 20, 20);
  z-index: 3;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  overflow-x: hidden;
  transition: cubic-bezier(0.6, 0, 0.4, 1);
  transition-duration: 2s;
}

#openMenuButton {
  right: 25px;
  color: white;
  z-index: 0;
}

#closebtn {
  color: white;
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}

#menu-items {
  margin-left: clamp(4rem, 20vw, 48rem);
  position: relative;
  z-index: 4;
}

#menu-items:hover > .menu-item {
  opacity: 0.3;
}

#menu-items:hover > .menu-item:hover {
  opacity: 1;
}

.menu-item {
  color: white;
  font-size: clamp(3rem, 8vw, 8rem);
  font-family: "Ibarra Real Nova", serif;

  display: block;
  text-decoration: none;
  padding: clamp(0.25rem, 0.5vw, 1rem) 0rem;
  transition: opacity 400ms ease;
}

#menu-background-pattern {
  height: 100vh;
  width: 100vw;

  background-image: radial-gradient(
    rgba(255, 255, 255, 0.1) 9%,
    transparent 9%
  );
  background-position: 0% 0%;
  background-size: 12vmin 12vmin;

  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 5;

  transition: opacity 800ms ease,
    background-size 800ms ease;
}

#menu-items:hover ~ #menu-background-pattern {
  background-size: 11vmin 11vmin;
  opacity: 0.5;
}

last the JS

function openMenu() {
  document.getElementById("menu").style.width = "100%";
}

function closeMenu() {
  document.getElementById("menu").style.width = "0";
}

I tried to change some things in the CSS and HTML but it still didn't work and made it more buggy and so I got rid of the changes. I realy need help

Solution

The issue is with your css.

You are put z-index as 5 for #menu-background-pattern. So this will cover the #closebtn.

You can add z-index greater than the z-index of #menu-background-pattern to #closebtn

I tried this in your code and it worked. Please check the code written below ( your code, just updated the z-index)

function openMenu() {
      
      document.getElementById("menu").style.width = "100%";
    }
    
    function closeMenu() {
      document.getElementById("menu").style.width = "0";
    }

body {
  background-color: rgb(20, 20, 20);
  margin: 0px;
}

#menu {
  height: 100%;
  width: 0;
  position: fixed;
  background-color: rgb(20, 20, 20);
  z-index: 3;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  overflow-x: hidden;
  transition: cubic-bezier(0.6, 0, 0.4, 1);
  transition-duration: 2s;
}

#openMenuButton {
  right: 25px;
  color: white;
  z-index: 0;
}

#closebtn {
  color: white;
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
  z-index:9
}

#menu-items {
  margin-left: clamp(4rem, 20vw, 48rem);
  position: relative;
  z-index: 4;
}

#menu-items:hover>.menu-item {
  opacity: 0.3;
}

#menu-items:hover>.menu-item:hover {
  opacity: 1;
}

.menu-item {
  color: white;
  font-size: clamp(3rem, 8vw, 8rem);
  font-family: "Ibarra Real Nova", serif;
  display: block;
  text-decoration: none;
  padding: clamp(0.25rem, 0.5vw, 1rem) 0rem;
  transition: opacity 400ms ease;
}

#menu-background-pattern {
  height: 100vh;
  width: 100vw;
  background-image: radial-gradient( rgba(255, 255, 255, 0.1) 9%, transparent 9%);
  background-position: 0% 0%;
  background-size: 12vmin 12vmin;
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 0;
  transition: opacity 800ms ease, background-size 800ms ease;
}

#menu-items:hover~#menu-background-pattern {
  background-size: 11vmin 11vmin;
  opacity: 0.5;
}

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World!</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
 
  <body>
     <div id="openMenuButton">
      <span style= "font-size:30px;cursor:pointer"
        onclick="openMenu()">&#9776; Menu
      </span>
    </div>
        <div id="menu">
        <div id="closebtn">
          <span style= "font-size:36px;cursor:pointer"
            onclick="closeMenu()">&times; Close
          </span>
        </div>
          <div id="menu-items">
              <a href="/" class="menu-item">Home</a>
              <a href="games/" class="menu-item">Games</a>
              <a href="/" class="menu-item">About</a>
              <a href="/" class="menu-item">Contact Us</a>
          </div>
          <div id="menu-background-pattern"></div>
      </div>
  </body>
 
</html>

.

Just a suggestion, if you add some webkit style for scroll-bar, it will be great

Answered By - ARJUN PS