z-index doesn't work on navbar in mobile view - css

Question

I have created navbar with scroll effect but i face one problem with mobile responsive view. Please guide me how to solve this problem.
I want to place bottom nav-list below the navbar in mobile view while click on hamburger icon. So you can't see the below nav-list. I tried to put z-index in nav-list but it doesn't work, How do I do this?
const navbar = document.getElementById("navbar");
const navbarContainer = document.getElementById("navbar-container");
const navRight = document.querySelector('#navbar .right');
var prevScrollPos = window.pageYOffset;
window.addEventListener("scroll", () => {
var currScrollPos = window.pageYOffset;
if (prevScrollPos > currScrollPos) {
navbarContainer.style.top = "0";
if (currScrollPos !== 0) {
navbarContainer.classList.add("shadow");
navbar.style.padding = "1rem 6rem";
navRight.style.top = '61px';
} else {
navbarContainer.style.position = "absolute";
navbarContainer.classList.remove("shadow");
navbar.style.padding = "2rem 6rem";
navRight.style.top = '81px';
}
} else if (currScrollPos > navbarContainer.offsetHeight) {
navbarContainer.style.top = `-${navbarContainer.offsetHeight + 5}px`;
navbarContainer.style.position = "fixed";
if (currScrollPos <= navbarContainer.offsetHeight + 5) {
navbarContainer.style.transition = "none";
} else {
navbarContainer.style.transition =
"top 0.6s ease-in-out, box-shadow 0.3s cubic-bezier(1, 1, 1, 1)";
}
}
prevScrollPos = currScrollPos;
});
// mobile view
const hamBurger = document.getElementById("hamburger");
hamBurger.addEventListener("click", () => {
hamBurger.classList.toggle("is-active");
if (hamBurger.classList.contains("is-active")) {
navRight.style.transform = `translateY(0%)`;
} else {
navRight.style.transform = `translateY(-100%)`;
}
});
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: sans-serif;
}
html {
font-size: 62.5%;
/* 1rem = 10px */
}
body {
background-color: rgb(241, 241, 241);
}
.container {
max-width: 120rem;
margin: 0 auto;
padding: 6rem;
}
a {
text-decoration: none;
}
#navbar-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: rgb(241, 241, 241);
z-index: 9999;
transition: top 0.6s ease-in-out, box-shadow 0.3s cubic-bezier(1, 1, 1, 1);
}
#navbar-container.shadow {
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}
#navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 6rem;
transition: all 0.3s cubic-bezier(1, 1, 1, 1);
padding: 2rem 6rem;
}
.site-logo a {
font-size: 3.2rem;
font-weight: 800;
position: relative;
color: #000000;
transition: color 0.3s cubic-bezier(1, 1, 1, 1);
}
.site-logo a::after {
content: "";
position: absolute;
top: 55%;
left: 110%;
width: 6px;
height: 6px;
background-color: #000000;
transition: background-color 0.3s cubic-bezier(1, 1, 1, 1);
}
#navbar .right {
display: flex;
justify-content: center;
align-items: center;
gap: 2.5rem;
}
#navbar ul {
display: flex;
justify-content: center;
align-items: center;
gap: 3rem;
}
ul li {
font-size: 1.8rem;
font-family: var(--local-font);
font-weight: 500;
list-style: none;
}
ul li a {
position: relative;
color: #000000;
}
/* ==========
Nav hamburger
============== */
#hamburger {
display: none;
}
#hamburger .line {
width: 30px;
height: 3px;
background-color: #000000;
display: block;
margin: 8px auto;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
#hamburger:hover {
cursor: pointer;
}
#hamburger.is-active .line:nth-child(2) {
opacity: 0;
}
#hamburger.is-active .line:nth-child(1) {
-webkit-transform: translateY(11px) rotate(45deg);
-ms-transform: translateY(11px) rotate(45deg);
-o-transform: translateY(11px) rotate(45deg);
transform: translateY(11px) rotate(45deg);
}
#hamburger.is-active .line:nth-child(3) {
-webkit-transform: translateY(-11px) rotate(-45deg);
-ms-transform: translateY(-11px) rotate(-45deg);
-o-transform: translateY(-11px) rotate(-45deg);
transform: translateY(-11px) rotate(-45deg);
}
#media (max-width: 768px) {
#hamburger {
display: block;
}
#navbar {
position: relative;
color: #ffffff;
}
#navbar .right {
position: absolute;
top: 81px;
right: 0;
width: 100%;
background-color: rgb(252, 70, 70);
flex-direction: column;
align-items: flex-start;
padding: 3rem 6rem 6rem 6rem;
gap: 3.5rem;
transform: translateY(-100%);
z-index: -999;
overflow: hidden;
transition: transform 400ms ease 0s;
}
#navbar .right .nav-list {
flex-direction: column;
align-items: flex-start;
gap: 3.5rem;
}
}
section p {
font-size: 3rem;
text-align: justify;
margin-top: 5rem;
}
<header id="navbar-container">
<nav id="navbar" class="container">
<div class="site-logo">Hi</div>
<div class="right">
<ul class="nav-list">
<li class="nav-btn">
<a href="./">
<p class="nav-button-text">Home</p>
</a>
</li>
<li class="nav-btn">
<a href="#">
<p class="nav-button-text">Resume</p>
</a>
</li>
<li class="nav-btn">
<a href="#">
<p class="nav-button-text">Contact</p>
</a>
</li>
</ul>
</div>
<div id="hamburger">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
</div>
</nav>
</header>
<section class="container">
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Distinctio saepe facilis cumque laudantium! Atque, delectus ipsum esse obcaecati optio eum quibusdam saepe, sapiente rem fugiat iure reprehenderit totam odit? Temporibus, asperiores perferendis.
Ducimus, asperiores. Pariatur in alias doloremque delectus esse reprehenderit non odio iusto, qui vero tempore ducimus odit sapiente dolore distinctio explicabo quisquam natus ratione obcaecati. Eos sint quae explicabo dolores et enim! Fuga labore
quaerat optio eius tempora animi saepe nisi debitis corporis harum. Assumenda, cupiditate sunt excepturi architecto distinctio ipsa natus explicabo officia autem modi id possimus? Incidunt quod odit expedita totam, distinctio qui quasi laudantium
possimus? Odio inventore facilis, expedita totam beatae dolores cupiditate enim tempore? Sequi rerum corporis nam labore sapiente amet ex porro. Dicta libero officiis quis molestiae nobis! Exercitationem quis doloribus maiores earum similique, eveniet
numquam praesentium vel quae rem dolore eum, odit beatae illo atque in consequuntur commodi omnis autem dolorem, quidem consequatur eius unde temporibus! Natus rerum neque molestias totam, consequatur nemo quia obcaecati repellat doloremque quod,
iure fugit ducimus consectetur porro, voluptas quibusdam dicta maiores ipsam dolore eveniet. Dolore, ducimus. Officia eos incidunt perspiciatis hic delectus! Ad error, ducimus expedita, numquam modi, dolor tempora harum itaque facere possimus deleniti
placeat.
</p>
</section>

Answer 1

It is better to create a new menu during adaptation and give it a z-index smaller than the header. Because right now your <ul class="nav-list> is in navbar, so nav-list will be hard to become either