How to toggle input checkbox? - html

Question

So this is my html:
<div class="showcase">
<div class="overlay">
<div class="container">
<h1>Мышонок</h1>
<!-- Hamburger -->
<div class="menu-wrap">
<input type="checkbox" class="toggler" />
<div class="hamburger"><div></div></div>
<div class="menu">
<div>
<div>
<ul>
<li>Personal</li>
<li>Men</li>
<li>Women</li>
<li>Video</li>
<li>About</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
And this is my CSS:
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body {
font-family: "Oswald", sans-serif;
}
img {
width: 100%;
height: auto;
}
/* Utility */
.container {
margin: 0 auto;
max-width: 1160px;
padding: 0 20px;
overflow: hidden;
}
.overlay {
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;
background-color: rgba(0, 0, 0, 0.5);
z-index: 999;
}
.hidden {
display: none;
}
/* Home */
.showcase {
position: relative;
height: 100vh;
background-image: url(../img/homebg/bg1.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
animation: slide 18s infinite;
transition: 100ms ease-in-out;
}
.showcase h1 {
font-size: 4rem;
font-weight: 500;
color: #fff;
padding-top: 40px;
text-transform: uppercase;
z-index: 1;
}
#keyframes slide {
0% {
background-image: url(../img/homebg/bg1.jpg);
}
20% {
background-image: url(../img/homebg/bg2.jpg);
}
40% {
background-image: url(../img/homebg/bg3.jpg);
}
60% {
background-image: url(../img/homebg/bg4.jpg);
}
80% {
background-image: url(../img/homebg/bg5.jpg);
}
100% {
background-image: url(../img/homebg/bg1.jpg);
}
}
This is additional CSS I have for hamburger menu style:
.menu-wrap {
position: fixed;
top: 0;
left: 0;
z-index: 2;
}
.menu-wrap .toggler {
position: absolute;
top: 0;
left: 0;
z-index: 2;
cursor: pointer;
width: 50px;
height: 50px;
opacity: 0;
}
.menu-wrap .hamburger {
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 60px;
height: 60px;
padding: 1rem;
/* background: rgba(0, 0, 0, 0.5); */
background: transparent;
display: flex;
align-items: center;
justify-content: center;
}
/* Hamburger Icon */
.menu-wrap .hamburger > div {
position: relative;
flex: none;
width: 100%;
height: 2px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.menu-wrap .hamburger > div::before,
.menu-wrap .hamburger > div::after {
content: "";
position: absolute;
z-index: 1;
top: -10px;
width: 100%;
height: 2px;
background: inherit;
}
.menu-wrap .hamburger > div::after {
top: 10px;
}
/* Toggler Animation */
.menu-wrap .toggler:checked + .haumburger > div {
transform: rotate(135deg);
}
Problem: I cannot toggle the check input button. I look in the inspector, it is positioned in left top corner like it should, but I cannot check it. It is just uncheckable. What am I doing wrong here?
I need to toggle checkbox of input with class "toggler", but it just not checking..? Please help
P.S. I think it has to do something with my overlay. Can someone check? Cuz I don't understand what could be wrong

Answer 1

So, I have messed up with the z-index.
The correct z-index in order for the checkbox to work is:
.menu-wrap {
position: fixed;
top: 0;
left: 0;
z-index: 1001;
}
.menu-wrap .toggler {
position: absolute;
top: 0;
left: 0;
z-index: 1002;
cursor: pointer;
width: 50px;
height: 50px;
opacity: 0;
}
.menu-wrap .hamburger {
position: absolute;
top: 0;
left: 0;
z-index: 1001;
width: 60px;
height: 60px;
padding: 1rem;
/* background: rgba(0, 0, 0, 0.5); */
background: transparent;
display: flex;
align-items: center;
justify-content: center;
}
/* Hamburger Icon */
.menu-wrap .hamburger > div {
position: relative;
flex: none;
width: 100%;
height: 2px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.menu-wrap .hamburger > div::before,
.menu-wrap .hamburger > div::after {
content: "";
position: absolute;
z-index: 1;
top: -10px;
width: 100%;
height: 2px;
background: inherit;
}
.menu-wrap .hamburger > div::after {
top: 10px;
}
/* Toggler Animation */
.menu-wrap .toggler:checked + .hamburger > div {
transform: rotate(135deg);
}