Hi All!!

So I'm having some trouble with this responsive drop-down nav ahhhh lol

What happens is that when I drop nav the menu opens up behind the content that is below the nav.

I've had a good go at trying to fix it with z-index but I can't seem to find a solution!

plz help fam

HTML CODE:

<header>
    <!-- NAV -->
    <div class="nav-bar">
        <h3>EXHALE</h3>
        <label for="toggle">&#9776;</label>
        <input type="checkbox" id="toggle">
        <div class="menu">
            <a href="#">ABOUT</a>
            <a href="#">GUIDES</a>
            <a href="#">CONTACT</a>
            <a href="#"><span>STORE LOCATIONS</span></a>
        </div>
    </div>
</header>
<main>
    <!-- TITLE -->
    <div class="title-line">
        <h2>Just Breath and it will Change Everything</h2>
        <h1>EXHALE</h1>
        <p>| Bathroom Designs &amp; Accessories |</p>
    </div>

CSS CODE:

/* NAV */ .nav-bar { border-bottom: 1px solid #eaeaeb; text-align: right; height: 70px; line-height: 70px; }

.nav-bar h3{ width: 70px; margin: 0; padding-left: 20px; display: inline-block; float: left; }

.menu { margin: 0 30px 0 0; }

.menu a { clear: right; text-decoration: none; color: #111; margin: 0 10px; line-height: 70px; overflow: visible; }

span { color: #54D17a; }

label { margin: 0 40px 0 0; font-size: 26px; line-height: 70px; display: none; width: 26px; float: right; }

toggle {

display: none;

}

@media only screen and (max-width: 699px) { label { display: block; cursor: pointer; }

.menu {
    text-align: center;
    width: 100%;
    display: none;
}

.menu a {
    display: block;
    border-bottom: 1px solid #eaeaeb;
    margin: 0;
}

#toggle:checked + .menu {
    display: block;
}

}

/* TITLE */

.title-line { height: 700px width: 100%; margin: 0; padding: 50px 35px; text-align: center; justify-content: center; z-index: -100; }

.title-line h2 { font-family: "Cormorant+Garamond"; font-size: 60px; font-weight: 400; margin-bottom: 35px; }

.title-line h1 { font-size: 30px; font-weight: 600; text-decoration: underline; }

.title-line p { font-family: "Cormorant+Garamond"; font-size: 18px; font-style: italic; }