How do I make my hamburger menu icon be on top of my banner image?

Question

I'm having issues making the hamburger icon be on top of the banner image. I've tried adjusting the z-index, setting the nav background-color to transparent, and placing the background image in the header instead of the banner section. I don't know what other steps to take. Any advice would be greatly appreciated.

function openNav() {
    document.getElementById("main-nav").style.height = "100%";
}

function closeNav() {
    document.getElementById("main-nav").style.height = "0%";
}

/*Nav*/
header {
  background-color: transparent;
}

.overlay {
  height: 0%;
  width: 100%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #567E3A;
  overflow-y: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #fff;
  display: block;
  transition: 0.3s;
}

.overlay a:hover,
.overlay a:focus {
  color: #7F8C8D;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

.burger {
  font-size: 2em;
  cursor: pointer;
}



/*Banner*/

#banner {
  background-image: url("http://res.cloudinary.com/dboauovcs/image/upload/c_scale,w_2000/v1521182602/camp3_xhp0d9.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 100vh;
  width: 100%;
  display: grid;
}

.banner-text {
  margin: auto;
  text-align: center;
  color: #fff;
}

.banner-text h1 {
  margin: 2em 1.4em 1.4em 1.4em;
  font-size: 2em;
  line-height: 1.8;
  color: #fff;
  text-shadow: 3px 3px #000;
}

<header>
        <nav id="main-nav" class="overlay">
            <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
            <div class="overlay-content">
                <a href="#">Destinations</a>
                <a href="#">Accomidation</a>
                <a href="#">Stories</a>
                <a href="#">Contact</a>
            </div>
        </nav>

        <span class="burger" onclick="openNav()">&#9776;</span>
    </header>



    <section id="banner">
        <div class="banner-text">
            <h1>Lorem Lipsum</h1>
            <a href="#" class="btn">Book Today</a>
        </div>
    </section>

Answer 1

Like this?

function openNav() {
    document.getElementById("main-nav").style.height = "100%";
}

function closeNav() {
    document.getElementById("main-nav").style.height = "0%";
}

/*Nav*/
header {
  background-color: transparent;
}

.overlay {
  height: 0%;
  width: 100%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #567E3A;
  overflow-y: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #fff;
  display: block;
  transition: 0.3s;
}

.overlay a:hover,
.overlay a:focus {
  color: #7F8C8D;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

.burger {
  font-size: 2em;
  cursor: pointer;
  position: absolute;
}



/*Banner*/

#banner {
  background-image: url("http://res.cloudinary.com/dboauovcs/image/upload/c_scale,w_2000/v1521182602/camp3_xhp0d9.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 100vh;
  width: 100%;
  display: grid;
}

.banner-text {
  margin: auto;
  text-align: center;
  color: #fff;
}

.banner-text h1 {
  margin: 2em 1.4em 1.4em 1.4em;
  font-size: 2em;
  line-height: 1.8;
  color: #fff;
  text-shadow: 3px 3px #000;
}

<header>
        <nav id="main-nav" class="overlay">
            <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
            <div class="overlay-content">
                <a href="#">Destinations</a>
                <a href="#">Accomidation</a>
                <a href="#">Stories</a>
                <a href="#">Contact</a>
            </div>
        </nav>

        <span class="burger" onclick="openNav()">&#9776;</span>
    </header>



    <section id="banner">
        <div class="banner-text">
            <h1>Lorem Lipsum</h1>
            <a href="#" class="btn">Book Today</a>
        </div>
    </section>

A little explanation on what I've done here (presuming this is the treatment you are looking for): By positioning the hamburger as absolute, we pull it completely out of the static layout flow, so other elements ignore its existence when positioning. The element's location can then be controlled with left, right, top and bottom, and will position itself relative to the first ancestor element positioned absolutely, or the body if no element is positioned absolutely. You'll probably want to consider dialing in the positioning a bit with these attributes, as you might not want to rely on the browser to calculate its position with defaults.

Answer 2

function openNav() {
    document.getElementById("main-nav").style.height = "100%";
}

function closeNav() {
    document.getElementById("main-nav").style.height = "0%";
}

/*Nav*/
header {
  background-color: transparent;
  position: absolute;
}

.overlay {
  height: 0%;
  width: 100%;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #567E3A;
  overflow-y: hidden;
  transition: 0.5s;
}

.overlay-content {
  position: relative;
  top: 25%;
  width: 100%;
  text-align: center;
  margin-top: 30px;
}

.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #fff;
  display: block;
  transition: 0.3s;
}

.overlay a:hover,
.overlay a:focus {
  color: #7F8C8D;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}

.burger {
  font-size: 2em;
  cursor: pointer;
}



/*Banner*/

#banner {
  background-image: url("http://res.cloudinary.com/dboauovcs/image/upload/c_scale,w_2000/v1521182602/camp3_xhp0d9.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 100vh;
  width: 100%;
  display: grid;
}

.banner-text {
  margin: auto;
  text-align: center;
  color: #fff;
}

.banner-text h1 {
  margin: 2em 1.4em 1.4em 1.4em;
  font-size: 2em;
  line-height: 1.8;
  color: #fff;
  text-shadow: 3px 3px #000;
}

<header>
        <nav id="main-nav" class="overlay">
            <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
            <div class="overlay-content">
                <a href="#">Destinations</a>
                <a href="#">Accomidation</a>
                <a href="#">Stories</a>
                <a href="#">Contact</a>
            </div>
        </nav>

        <span class="burger" onclick="openNav()">&#9776;</span>
    </header>



    <section id="banner">
        <div class="banner-text">
            <h1>Lorem Lipsum</h1>
            <a href="#" class="btn">Book Today</a>
        </div>
    </section>