Hamburger dropdown overlapped by Hero image content - html

Question

I have a dynamic clip-path dropping down from the top-right corner on the hamburger menu click. Everything works fine except the content from my Hero image is overlapping. I tried z-index, but these are all position absolute so it has no effect. If I change the position it screws up the whole page. This project is being built in Django, but that doesn't seem to matter much here.
HTML
{% load static %}
<header class="nav-down">
<nav>
<div class="hamburger">
<i class="fas fa-bars"></i>
</div>
<ul class="nav-links">
<li>Home</li>
<li>News</li>
<li>Library</li>
<li>Search</li>
<li>About</li>
</ul>
</nav>
</header>
CSS
/* ===========================================
RESET CSS BEGIN*
=========================================== */
* {
margin: 0;
padding: 0;
}
body,
html {
margin: 0;
padding: 0;
height: 100%;
box-sizing: border-box;
font-family: 'Montserrat', sans-serif;
position: relative;
}
a {
color: #fff;
}
li {
list-style: none;
}
#html-container {
min-height: 100%;
}
#main {
overflow: scroll;
padding-bottom: 81px;
}
/*RESET CSS END*/
.showcase {
background-image: linear-gradient(
to bottom,
rgba(0, 0, 0, 0.2),
rgba(0, 0, 0, 0.2)
),
url(/static/img/vg_home.jpeg);
height: 100vh;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.showcase-content-top {
position: relative;
top: 25%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
margin-bottom: 20px;
text-align: center;
text-transform: uppercase;
}
.showcase-content-top h1 {
font-weight: 900;
font-size: 5vw;
}
.text-color {
color: rgb(151, 193, 92);
}
#wave {
height: 100px;
width: 100px;
border: 10px solid silver;
position: absolute;
top: 34.15%;
left: 46.2%;
z-index: -1;
transform: translate(-50%, -50%);
border-radius: 50%;
-webkit-animation: pulseEffect 4s infinite linear;
animation: pulseEffect 4s infinite linear;
}
#-webkit-keyframes pulseEffect {
from {
transform: translate(-50%, -50%) scale(0.5);
border: 0px solid silver;
opacity: 0;
}
to {
transform: translate(-50%, -50%) scale(1);
border: 10px solid rgb(151, 193, 92);
opacity: 1;
}
}
#keyframes pulseEffect {
from {
transform: translate(-50%, -50%) scale(0.5);
opacity: 0.4;
}
to {
transform: translate(-50%, -50%) scale(3);
opacity: 0;
}
}
.separator {
color: rgb(151, 193, 92);
}
.sub {
font-size: 1.5vw;
vertical-align: middle;
}
.showcase-content-buttons > ul {
display: inline;
text-align: center;
position: absolute;
top: 85%;
left: 50%;
transform: translate(-50%, -50%);
list-style: none;
padding: 0;
}
.showcase-content-buttons a {
margin: 20px;
color: #fff;
border: 1px solid #fff;
padding: 10px 40px;
transition: 0.75s;
}
.showcase-content-buttons a:hover {
background-color: rgb(151, 193, 92);
border: 1px solid rgb(151, 193, 92);
text-decoration: none;
color: #fff;
}
/* ===========================================
NAV BAR STYLING // START
=========================================== */
header {
background: rgb(25, 25, 25);
height: 81px;
position: fixed;
transition: top 0.5s ease-in-out;
width: 100%;
}
.nav-up {
top: -81px;
}
nav {
position: relative;
height: 81px;
background: rgb(25, 25, 25);
}
.nav-links {
display: flex;
list-style: none;
width: 50%;
height: 100%;
justify-content: space-around;
align-items: center;
margin-left: auto;
}
.nav-links li a {
font-size: 20px;
text-decoration: none;
color: #fff;
}
.hamburger {
display: none;
}
/*Navigation Bar styling // END*/
/* ===========================================
About Page Styling // Start
=========================================== */
.about-container {
display: block;
margin: auto;
max-width: 65%;
height: 85%;
background-color: rgba(200, 200, 200, 0.05);
border-radius: 20px;
}
.about-container h6 {
color: #fff;
text-align: center;
margin-right: 250px;
padding-top: 60px;
font-size: 2.5rem;
letter-spacing: 1.5px;
}
.about-container .large {
color: rgba(114, 245, 190);
letter-spacing: 3.5px;
font-size: 3.5rem;
}
.about-container .paragraph {
color: #fff;
font-size: 1rem;
letter-spacing: 1px;
padding-left: 20px;
padding-right: 20px;
line-height: 2rem;
}
/*About Page Styling // End*/
/* ===========================================
FOOTER STYLES // START
=============================================*/
#footer {
position: relative;
height: 81px;
margin-top: -81px;
background: rgb(25, 25, 25);
color: white;
text-align: center;
clear: both;
z-index: 1;
}
.footer-content {
margin: auto;
max-width: 100%;
font-size: 1.25vw;
padding: 5px 0;
}
.page-content > p > img {
max-width: 2vh;
height: auto;
}
p.logos {
max-width: 100%;
height: auto;
margin-bottom: 0;
}
footer h1 {
font-size: 20px;
color: white;
font-weight: bold;
}
footer a {
color: #fff;
border-bottom: 1px solid transparent;
transition: 0.3s;
}
footer a:hover {
text-decoration: none;
color: #fff;
border-bottom: 1px solid rgb(151, 193, 92);
}
/*FOOTER STYLES END*/
/* ============= RESPONSIVE max-width: 991p =========== */
#media screen and (max-width: 768px) {
#wave {
display: none;
}
.hamburger i {
position: absolute;
width: 100%;
margin: auto;
color: #fff;
top: 25%;
right: -30%;
font-size: 40px;
}
nav {
position: relative;
}
.hamburger {
position: absolute;
display: flex;
cursor: pointer;
background: rgb(151, 193, 92);
height: 81px;
width: 100px;
right: 0;
top: 0;
transform: translate(-5%, 0%);
z-index: 3;
}
.nav-links {
position: absolute;
background: rgb(151, 193, 92);
height: 100vh;
width: 100%;
flex-direction: column;
clip-path: circle(100px at 100% -20%);
-webkit-clip-path: circle(100px at 100% -20%);
transition: all 1s ease-out;
pointer-events: none;
z-index: 2;
}
.nav-links.open {
clip-path: circle(1400px at 100% -10%);
-webkit-clip-path: circle(1400px at 100% -10%);
pointer-events: all;
}
}
/* ============= RESPONSIVE max-width: 768px =========== */
#media screen and (max-width: 768px) {
}
/* ============= RESPONSIVE max-width: 385px=========== */
#media screen and (max-width: 385px) {
}
Before the dropdown is initiated
An image of what it looks like once the dropdown is fully encompensing the screen

Answer 1

Sorry guys, I asked it too quickly. I just needed to give the header tag a z-index, not the nav tag. Working now.