Quiero que cuando el nav aparezca con la animación que tengo de arriba a abajo el nav o menu este por encima del header, titulo..etc como que aparezca justo cuando termina el header para que la animation de slide arriba abajo se vea mejor y no se superponga con el header
document.querySelector(".bars__menu").addEventListener("click", animateBars);
let line1__bars = document.querySelector(".line1__bars-menu");
let line2__bars = document.querySelector(".line2__bars-menu");
let line3__bars = document.querySelector(".line3__bars-menu");
let list_nav = document.querySelector(".lista_navegacion");
function animateBars () {
line1__bars.classList.toggle("activeLine1__bars-menu");
line2__bars.classList.toggle("activeLine2__bars-menu");
line3__bars.classList.toggle("activeLine3__bars-menu");
list_nav.classList.toggle("activeNav");
}
header {
height: 68px;
display: inline-block;
width: 100%;
background: #ffffff;
border: none;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.29);
top: 0px;
left: 0px;
position: fixed;
z-index: 20 !important;
}
header .oxygen-title {
margin: 0 2rem;
display: inline-block;
}
header .oxygen-title h1 {
font-family: "Raleway", "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
font-style: normal;
font-weight: 300;
font-size: 32px;
color: #08a6e4;
}
header .bars__menu {
display: inline-block;
position: relative;
right: 0px;
margin-left: auto;
margin-right: 0px;
cursor: pointer;
}
header .bars__menu span {
display: block;
width: 30px;
height: 2px;
background: #08a6e4;
margin-top: 6px;
transform-origin: 0px 100%;
transition: all 0.3s;
}
nav {
width: 100%;
margin-top: -500px;
transition: visibility 1s, opacity 1s, margin-top 1s linear;
}
nav ul {
z-index: 5;
padding: 3rem 0;
width: 100%;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.29);
margin-right: auto;
text-align: left;
list-style: none;
background: white;
font-family: "Open Sans", "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
font-style: normal;
font-weight: 600;
font-size: 11px;
letter-spacing: 3.28px;
}
nav ul li {
z-index: 5;
color: #a5a5a5;
margin-left: 2rem;
line-height: 3;
cursor: pointer;
}
nav ul li:hover {
color: black;
}
.activeLine1__bars-menu {
transform: rotate(45deg) translate(-2px, 1px);
}
.activeLine2__bars-menu {
opacity: 0;
margin-left: 30px;
}
.activeLine3__bars-menu {
transform: rotate(-45deg) translate(-4px, 2px);
}
.activeNav {
z-index: 1;
visibility: visible;
opacity: 1;
margin-top: 0px;
}
<header>
<div class="oxygen-title">
<h1>OXYGENShop</h1>
</div><div class="bars__menu">
<span class="line1__bars-menu"></span>
<span class="line2__bars-menu"></span>
<span class="line3__bars-menu"></span>
</div>
<nav class="lista_navegacion">
<ul>
<li><a href=""></a>WHY US</li>
<li><a href=""></a>BENEFITS</li>
<li><a href=""></a>PRICES</li>
<li><a href=""></a>CONTACT</li>
</ul>
</nav>
</header>