So basically I need the nav ul to stay under the header (which is his parent). Also,the header is the cyan section with the logo and burger button.`
<html>
<head>
</head>
<body>
<header>
<section class="header-container">
<section class="wrap-logo">
<img src="" alt="" />
</section>
<nav>
<ul id="nav-list-wrapper" class="nav__hide">
<a href=""><li>Homepage</li></a>
<a href=""><li>Categories</li></a>
<a href=""><li>Our Blog</li></a>
<a href=""><li>Contacts</li></a>
</ul>
</nav>
<section class="wrap-icons">
<section class="wrap-searchbar" id="wrap-searchbar">
<input type="text" placeholder="Cerca" class="search-input" />
<a class="search-btn" href="#">
<i class="fa-solid fa-magnifying-glass"></i>
</a>
</section>
<i class="fa-solid fa-user"></i>
<button
id="btn-hamburger"
class="hamburger-btn"
aria-expanded="false"
>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</button>
</section>
</section>
</header>
</body>
</html>
header {
position: fixed;
top: 0;
z-index: 999;
}
nav ul {
position: fixed;
width: 100%;
height: auto;
z-index: 9;
background-color: var(--clr-bg-body);
flex-direction: column;
justify-content: center !important;
align-items: center !important;
top: 60px;
left: 0px;
padding-block: 20px;
box-shadow: 0px 5px 18px black;
transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
`
And I need both of them fixed, but apparentely, even if z-index are one higher than another, nav ul shows up on top of parent. You can tell by the shadow, but you could tell even better if you'd be able to see the animation of the nav ul coming down from outside the screen on top of the header (instead of below it). header on top and nav ul below
