Why does the checkbox become unclickable when width is lowered
This is a incomplete website design i have been working with. The problem i am getting is when i reduce the width of the browser the triple dash appears but for some reason the checkbox becomes unclickable. I tried different things such as increasing the z-index and stuff but it just doesn't work. How can i make it work?
Document
Blank Space
A Place which is emptier without you
body {
display: block;
margin: 0;
font-family: Arial, sans-serif;
}
.top {
display: flex;
justify-content: space-between;
align-items: center;
background-color: lightblue;
height: 60px;
}
.name {
font-size: 28px;
font-weight: bold;
color: white;
padding: 15px;
}
.menu {
display: flex;
gap: 20px;
margin-right: 20px;
transition: all 0.3s ease;
opacity: 1;
}
.menu a {
font-size: 21px;
color: white;
text-decoration: none;
padding: 4px 8px;
border: none;
background-color: transparent;
}
.links {
text-decoration: none;
color: white;
padding: 4px 8px;
}
.links:hover {
color: lightblue;
background-color: white;
transition: all 0.3s ease;
border-radius: 4px;
}
.bottom {
display: flex;
justify-content: center;
align-items: center;
height: calc(100vh - 60px);
}
.bt {
font-size: 40px;
color: cadetblue;
}
.bt::selection {
background-color: lightblue;
color: white;
}
.name::selection {
background-color: white;
color: lightblue;
}
.fas.fa-bars {
background: none;
font-size: 28px;
color: white;
cursor: pointer;
border: none;
}
#icon {
position:fixed ;
right:10px;
top:17px;
opacity: 0;
transition: opacity 0.3s ease;
}
.sidebar {
position: fixed;
height: 100%;
width: 300px;
background-color: white;
display: flex;
flex-direction: column;
box-shadow: 0 0 10px grey;
}
.sidetop {
display: flex;
justify-content: space-between;
align-items: center;
background-color: lightblue;
height: 60px;
width: 100%;
}
.fas.fa-xmark {
color: white;
font-size: 28px;
}
let icons = document.querySelector("#icon");
let menu = document.querySelector(".menu");
window.addEventListener("resize", () => {
if(window.innerWidth < 800){
menu.style.opacity = "0";
icons.style.opacity = "1";
} else {
menu.style.opacity = "1";
icons.style.opacity = "0";
}
} )