My side navigation isn't going over the body content

Question

I'm having an issue where my side nav (which appears on smaller screens) isn't going over the content of the body (text, pictures, etc). I have my z-index set to 500 for my side nav and 0 for my body content and that doesn't appear to resolve the issue which I thought it would).

Here is a jfiddle: https://jsfiddle.net/timothykeyseraude/0w5wynLs/

html {
height: 100%
}

Thank you!

Answer 1

Add z-index:1 to "navbar-header-foundation" class, and your issue will be fixed.

Answer 2

Put the side navigation outside of the header, the heasder is taking the z-index of its parent, the header. See below.

// script.js


// ======= NavBar ======= //

function openNav() {
  document.getElementById("side-navigation").style.width = "100%";
}

function closeNav() {
  document.getElementById("side-navigation").style.width = "0";
}

@import "compass/css3";
@import "compass";
html {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  background-color: #333;
  min-height: 100vh;
}


/* jQuery */

.hidden {
  display: none;
}


/* ======= Background Image ======= */

body.home {
  background-image: URL("images/bc/Homebc.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

body.about {
  background-image: URL("images/bc/Aboutbc.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

body.approach {
  background-image: URL("images/bc/Approachbc.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

body.contact {
  background-image: URL("images/bc/Contactbc.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

body.tac {
  background-image: URL("images/bc/Termsbc.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}

body.privacy {
  background-image: URL("images/bc/Privacybc.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
}


/* ======= NavBar ======= */

#body-content {
  z-index: 0;
}


/* --- top nav section --- */

.navbar-header-foundation {
  position: fixed;
  left: 0;
  right: 0;
  height: 55px;
  background-color: #272727;
}

.top-navigation {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #272727;
  font-family: Century Gothic, sans-serif;
  font-size: 11px;
  float: left;
  display: inline-block;
}

.top-navigation li {
  float: left;
  border-right: 1px solid black;
  display: inline;
  height: 55px;
}

.top-navigation a {
  display: block;
  color: white;
  text-align: center;
  padding: 22px 50px;
  text-decoration: none;
  border: 1px;
  float: left;
}

.top-navigation a:hover:not(.active) {
  background-color: #111;
}

.top-navigation a.active {
  background-color: #52BA56;
}

.header__logo {
  float: right;
}

.brand__logo {
  height: 55px;
  width: 183px;
}


/* <> Top Nav Responsive Adjustments <> */

@media screen and (max-height: 700px) {
  .navbar-header-foundation {
    position: fixed;
    left: 0;
    right: 0;
    height: 50px;
    background-color: #272727;
  }
  .brand__logo {
    height: 50px;
    width: 167px;
  }
  .top-navigation {
    font-size: 10px;
  }
  .top-navigation li {
    height: 50px;
  }
  .top-navigation a {
    padding: 20px 50px;
  }
  .responsive__button {
    font-size: 22px;
  }
}


/* --- side nav section --- */

.responsive__button {
  display: none;
}

.side-navigation {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 500;
  top: 0;
  left: 0;
  background-color: #111;
  opacity: 1;
  overflow-x: hidden;
  transition: .85s;
  padding-top: 58px;
}

.side-navigation a:not(:first-child) {
  padding: 22px 10px 22px 25px;
  text-decoration: none;
  font-size: 11px;
  font-family: Century Gothic;
  color: white;
  display: block;
  transition: 0.44s;
}

.side-navigation a:not(:first-child) {
  border-bottom: 1px solid black;
}

.side-navigation a:nth-child(2) {
  border-top: 1px solid black;
}

.side-navigation a:hover {
  color: #f1f1f1;
}

.button-close-side-navigation {
  top: 9px;
  right: 25px;
  font-size: 35px;
  position: absolute;
  text-decoration: none;
  color: #52BA56;
}

@media screen and (max-width: 800px) {
  .top-navigation {
    display: none;
  }
  .responsive__button {
    display: inline-block;
    font-size: 25px;
    color: #52BA56;
    margin-left: 17px;
    margin-top: 10px;
  }
}

.content-container {
  z-index: 0;
}

.content2 {
  position: absolute;
  top: 10ex;
  left:10em;
  right: 0;
  bottom: 0;
  color: white;
  z-index: 0;
}

<body class="home" id="body-content">
  <section class="Navbar">
    <div id="NavBar-Navigation-Menu">
      <header class="navbar-header-foundation">
        <a href="#" class="header__icon" id="header__icon"></a>
        <a href="Index.html" class="header__logo" style="height: 0px">
          <img src="images/brandlogoNAV.png" class="brand__logo">
        </a>
        <nav class="top-navigation" id="top-navigation">
          <li><a class="active" href="Index.html">HOME</a></li>
          <li><a href="About.html">ABOUT</a></li>
          <li><a href="Approach.html">OUR APPROACH</a></li>
          <li><a href="CONTACT.html">CONTACT</a></li>
        </nav>
        <span class="responsive__button" onclick="openNav()">&#9776</span>
      </header>
       <nav class="side-navigation" id="side-navigation">
          <a href="javascript:void(0)" class="button-close-side-navigation" onclick="closeNav()">&times;</a>
          <a href="Index.html">HOME</a>
          <a href="About.html">ABOUT</a>
          <a href="Approach.html">APPROACH</a>
          <a href="Contact.html">CONTACT</a>
        </nav>
    </div>
  </section>

  <section>
    <div class="content-container">
      <p class="content2">
        aoefegfoyaefaerfuivba
        <br>
        <BR>bdiwubdiuwdwug
        <br>jwehdiuHFIUW
        <br>
      </p>
    </div>
  </section>

Answer 3

Your problem is your using position: absolute on p tag... so take that off and that will fix your problem, if you want to center your text you can use text-align: center