CSS - Problems with element overlays-CodePudding

I have this application below:

When I click the hamburger button. The menu rectangle opens like this:

Expected behavior:

I would like it to behave this way, overlapping the elements of the page, as is already happening, but I would like it to go behind the header.

HTML

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>

<body>
    <header>
        <div >
            <div >
                <nav >
                    <a href="#" >DEV.</a>
                    <ul >
                        <li >
                            <a href="#" >Home</a>
                        </li>
                        <li >
                            <a href="#" >About</a>
                        </li>
                        <li >
                            <a href="#" >Contact</a>
                        </li>
                    </ul>
                    <div >
                        <span ></span> 
                        <span ></span> 
                        <span ></span> 
                    </div>
                </nav>
            </div>
        </div>
    </header>
    <section id="home">
        <div >
            <div >
              <h1>Home</h1>
            </div>
        </div>
    </section>
    <script src="script.js"></script>
</body>

</html>

CSS

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    position: relative;
    height: 1000vh;
}

header {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #98dbc6;
}

li {
    list-style: none;
}

a {
    color: black;
    text-decoration: none;    
}

.navbar {
    position: relative;
    z-index: 1;    
}

.container {
    width: 1600px;
    margin: auto;    
}

.subcontainer {
    width: 85%;
    margin: auto;
}

.navbar {
    width: 100%;
    min-height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-menu {
    display: flex;
    padding-left: 30px;
    gap: 60px;
}

.nav-branding {
    font-size: 2rem;
}

.hamburger {
    display: none;
    cursor: pointer;
}

.bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px;
    transition: all 0.3s ease;
    background-color: black;
}

#home {
    margin-top: 70px;
    border: 1px solid black;
    height: 100vh;
}

@media(max-width:1600px) {
    .container {
        width: 100%;
    }
}

@media(max-width:1024px) {
    .hamburger {
        display: block;
    }

    .hamburger.active .bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .hamburger.active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    .nav-menu {
        padding-top: 60px;
        padding-bottom: 10px;
        position: fixed;
        left: 0;
        top: -100%;
        gap: 0;
        flex-direction: column;
        background-color: #b0abab;
        width: 100%;       
        transition: 0.3s;
        z-index: -1;
    }


    .nav-item {
        margin: 16px 0;
    }

    .nav-menu.active {
        top: 0;
    }
}

JavaScript

const hamburger = document.querySelector(".hamburger");
const navMenu = document.querySelector(".nav-menu");

hamburger.addEventListener("click", () => {
    hamburger.classList.toggle("active")
    navMenu.classList.toggle("active")
})

document.querySelectorAll(".nav-link").forEach(
    n => n.addEventListener("click", () => {

        hamburger.classList.remove("active");
        navMenu.classList.remove("active");
    })
)

CodePudding user response：

I had just altered your html and CSS and as per your design hope this works. If you need this style only on mobile view don't forget to add media query to the additional styles I had added to the CSS in fiddle.

changes I had made

Wrapped branding logo and hamburger menu inside a div
Added additional CSS to the wrapper div and commented in the bottom of css field in the jsfiddle

.head-wrapper{display: flex;justify-content: space-between;width: 100%;background-color: #98dbc6;padding-left: 7.5%;padding-right: 7.5%;min-height: 70px;align-items: center;}.subcontainer{width:100%;}

JSFIDDLE