I have tried to add a hamburger menu to my web page but it keeps going under the images and texts. I changed the z-index with different numbers but it still doesn't work.the menu it self has no problem and works somoothly but when I shrink the page, the images and the texts are on the menu if anyone knows please give a suggestion. Thank you
#menu__toggle {
opacity: 0;
}
#menu__toggle:checked+.menu__btn>span {
transform: rotate(45deg);
}
#menu__toggle:checked+.menu__btn>span::before {
top: 0;
transform: rotate(0deg);
}
#menu__toggle:checked+.menu__btn>span::after {
top: 0;
transform: rotate(90deg);
}
#menu__toggle:checked~.menu__box {
left: 0 !important;
}
.menu__btn {
position: absolute;
top: 20px;
left: 20px;
width: 26px;
height: 26px;
cursor: pointer;
z-index: 1000;
}
.menu__btn>span,
.menu__btn>span::before,
.menu__btn>span::after {
display: block;
position: absolute;
width: 100%;
height: 2px;
background-color: #08ebfc;
transition-duration: .25s;
}
.menu__btn>span::before {
content: '';
top: -8px;
}
.menu__btn>span::after {
content: '';
top: 8px;
}
.menu__box {
display: block;
position: absolute;
top: 0;
left: -100%;
width: 300px;
height: 100%;
margin: 0;
padding: 80px 0;
list-style: none;
background-color: #ECEFF1;
box-shadow: 2px 2px 6px rgba(0, 0, 0, .4);
transition-duration: .25s;
}
.menu__item {
display: block;
padding: 12px 24px;
color: #333;
font-family: 'Roboto', sans-serif;
font-size: 20px;
font-weight: 600;
text-decoration: none;
transition-duration: .25s;
}
.menu__item:hover {
background-color: #CFD8DC;
}<div class="bg">
<div class="hamburger-menu">
<!--this is the part for the menu-->
<input id="menu__toggle" type="checkbox" />
<label class="menu__btn" for="menu__toggle">
<span></span>
</label>
<ul class="menu__box">
<li><a class="menu__item" href="#">Home</a></li>
<li><a class="menu__item" href="#">About</a></li>
<li><a class="menu__item" href="#">Team</a></li>
<li><a class="menu__item" href="#">Contact</a></li>
<li><a class="menu__item" href="#">Twitter</a></li>
</ul>
</div>
<h1 class="neonText" style="text-align:center; padding:3% auto 1% auto;">TRANSFORMERS</h1>
<div class="container">
<img src="dece.jpg" alt="Decepticon logo" style="width:100%;">
<h1 class="h1-d">DECEPTICONS</h1>
<div class="content">
</div>
</div>