I want that when the nav appears with the animation that I have from top to bottom, the nav or menu is above the header, title, etc. so that it appears just when the header ends so that the animation of the slide up and down looks better and not overlaps with the 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>
What I did was wrap
.oxygen-title
y.bars__menu
inside a div with the class.cabecera-general
:Then, we go into that class and apply the following properties to it:
This way the header will be above the
nav
one that appears when you click on the menu button and your problem would be solved. Your code would look like this:Something got complicated with the z-index, your code is quite tangled. I send you a very basic example where you see that the second div is behind the first. Be careful because z-index does nothing if there is no position: relative (or some other)
example
Luck !!