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()">☰ Menu
</span>
</div>
<div id="menu">
<div id="closebtn">
<span style= "font-size:36px;cursor:pointer"
onclick="closeMenu()">× 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
2
Answers
Here’s a potential fix for you. I’ve changed the z-index property to zero which was covering your menu items.
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)
.
Just a suggestion, if you add some webkit style for scroll-bar, it will be great