Body content covers navbar drop down - html

Question

Im creating a responsive website so that when the website is used as a mobile they can check the box which will display a drop down menu of the navbar. This is currently working except when the box is clicked the drop down nav bar goes behind my banner content. Does anyone know why this is? Very stuck currently.
HTML CODE:
<div class = "wrapper">
<header>
<div class = "header">
<h2 class = "logo">Haukai Restaurant</h2>
<input type = "checkbox" id = "chk">
<label for = "chk" class = "show-menu-btn">
<i class = "fas fa-ellipsis-h"></i>
</label>
<ul class = "menu-nav">
Home
Menu
Reservations
Hours
Contact
<label for = "chk" class = "hide-menu-btn">
<i class = "fas fa-times"></i>
</label>
</ul>
<section class="banner">
<div class="img-container">
<div class="inner-container">
<h1>Haukai Restaurant</h1>
<h2>Bringing Maori culture and kai to you</h2>
<a class="btn" href="menu.html">Menu</a>
<a class="btn" href="reservations.html">Reservations</a>
<a class="btn" href="privacy.html">Privacy</a>
<div class = "about-us">
<br> <br> <br> <br> <br>
<div class = "about-us-content">
<h2>About us</h2>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.
</p>
</div>
</div>
</div>
</div>
</section>
</div>
</body>
CSS CODE:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
/* Home Page */
body {
background: #000;
min-height: 200vh;
position: relative;
}
.wrapper {
width: 100%;
}
/* Header */
.header {
height: 100px;
background: #000;
padding: 0 20px;
color: #fff;
}
.logo {
line-height: 100px;
float: left;
text-transform: uppercase;
}
.menu-nav {
float: right;
line-height: 100px;
}
.menu-nav a {
color: #fff;
text-transform: uppercase;
text-decoration: none;
padding: 0 10px;
transition: 0.4s;
}
.show-menu-btn,
.hide-menu-btn {
transition: 0.4s;
font-size: 30px;
cursor: pointer;
display: none;
}
.show-menu-btn {
float: right;
}
.show-menu-btn i {
line-height: 100px;
}
.menu a:hover,
.show-menu-btn:hover,
.hide-menu-btn:hover {
color: #feca1d;
}
#chk {
position: absolute;
visibility: hidden;
z-index: -1111;
}
.menu-content {
padding: 0 20px;
}
.banner {
position: relative;
width: 100%;
height: 100vh;
background: url(insiderest.jpg);
background-size: cover;
}
#media screen and (max-width: 600px) {
.show-menu-btn,
.hide-menu-btn {
display: block;
}
.menu-nav {
position: fixed;
width: 100%;
height: 100vh;
background: #333;
right: -100%;
top: 0;
text-align: center;
padding: 80px 0;
line-height: normal;
transition: 0.7s;
}
.menu-nav a {
display: block;
padding: 20px;
}
.hide-menu-btn {
position: absolute;
top: 40px;
right: 40px;
}
#chk:checked ~ .menu-nav {
right: 0;
}
}

Answer 1

Your using media queries. You have one .menu-nav above the query and one inside of the media query #media screen and (max-width: 600px) {
z-indexes are only counted if the position is fixed, relative, absolute, sticky, etc. The first css class will dismiss the z-index because it has no position property. Replacing the float with position relative could work.
.menu-nav {
float: right;
line-height: 100px;
}
or, alternatively it should work to add the z-index to the media query .menu-nav class.
#media screen and (max-width: 600px) {
.menu-nav {
position: fixed;
z-index:2;
width: 100%;
height: 100vh;
background: #333;
right: -100%;
top: 0;
text-align: center;
padding: 80px 0;
line-height: normal;
transition: 0.7s;
}
}

Answer 2

I think it will work.
.menu-nav {
z-index: 1000;
}