Nav-bar wont show up z-index issue(?)

The first html I did was doing fine with its z-index but on the second one, I added sticky nav bar, and now the nav bar isn't showing up when in phone mode.

Here is the comparison:

(sorry for the different sized images)

#navbar {  
    position: fixed;
    top: 0px;
    display: flex;
    overflow: hidden;
    padding: 10px 10px; /* Large padding which will shrink on scroll (using JS) */
    transition: 0.4s; /* Adds a transition effect when the padding is decreased */
    justify-content: space-around;
    align-items: center;
    min-height: 8vh;
    width: 100%;
    background-color: #55426e;
    z-index: 4;
}

.sticky{
    padding: 5px 10px;
}

.burger {
    display: none;
    cursor: pointer;
    padding: 5px;
    z-index: 3;
}

.burger div{
    width: 23px;
    height: 3px;
    background-color: aliceblue;
    margin: 5px;
    transition: all 0.3s ease;
    border-radius:10px;
}

@media screen and (max-width: 1024px) {
     .nav-links{
        width: 65%;
    }
}

@media screen and (max-width: 768px){
    body{
        overflow-x: hidden;
    }
    .nav-links {
        position: absolute;
        right: 0px;
        height: 92vh;
        top: 8vh;
        background-color: #55426e;
        display:flex;
        flex-direction:column;
        align-items: center;
        width: 50%;
        transform: translateX(100%);
        transition: transform 0.5s ease-in;
    }
    .nav-links li{
        opacity: 0;
    }
    .burger{
        display:block;
    }
    #navbar {
        padding: 2px 10px !important;
        /* Use !important to make sure that JavaScript 
        doesn't override the padding on small screens */
    }
    }

.withpic {
        position: relative;
        background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.5)), url(aboutme2.JPG);
        height: 100vh;
        background-size: cover;
        background-position: center;
}

.wopic {
        position: relative;
        background-color: #ddd5e2;
        padding-top: 20px;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: space-around;
        padding-left: 50px;
        padding-right: 50px;
        padding-bottom: 50px;
}

.under {
    position: relative;
    z-index: 3;
}
/*sticky nav bar -- from w3schools*/

.overtext {
        display: flex;
        align-items: flex-end;
        flex-direction: column;
        color: #ddd5e2;
        text-align: center;
        position: relative;
        z-index: -99;
}

<DOCTYPE! html>
    <html>
    <head>
        <title>Website</title>
        <link href="ask.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div class="withpic">
            <nav>
                <div id="navbar">
                    <div id="logo">
                        <h4>logo</h4>
                    </div>
                    <ul class="nav-links">
                        <li><a href="#"> HOME </a></li>

                        <li><a href="#"> ABOUT </a></li>

                        <li><a href="#"> PHOTOGRAPHY </a></li>

                        <li><a href="#"> ORGANIZER </a></li>

                        <li><a href="#"> CONTACT </a></li>
                    </ul>
                    <div class="burger">
                        <div class="line1"></div>
                        <div class="line2"></div>
                        <div class="line3"></div>
                    </div>
                </div>
            </nav>

            <div class="lefty under">
                <div class="overtext">
                    <h1>About Me</h1>
                    <em>
                        私について
                    </em>
                </div>
            </div>

        </div>
        <div class="wopic">
            <p>section without picture</p>    
        </div>
        <script src="app.js"></script>
        <script src="nav.js"></script>
    </body>
</html>

//burger javascript

function navSlide() {
    let burger = document.querySelector(".burger");
    let nav = document.querySelector(".nav-links");
    let navLinks = document.querySelectorAll(".nav-links li");
    //toggle nav
    burger.addEventListener("click", function() {
        nav.classList.toggle('nav-active');
  //animate links
    navLinks.forEach((link, index)=> {
        if (link.style.animation) {
            link.style.animation = "";
        } else {
            link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s`;
        }

    });
        //burger animation
    burger.classList.toggle('toggle');

    });


  
}

navSlide();

//sticky nav bar with transitions javascript

// When the user scrolls down 80px from the top of the document, resize the navbar's padding and the logo's font size
window.onscroll = function () { scrollFunction() };

function scrollFunction() {
    if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
        document.getElementById("navbar").style.padding = "2px 10px";
        document.getElementById("logo").style.fontSize = "20px";
    } else {
        document.getElementById("navbar").style.padding = "10px 10px";
        document.getElementById("logo").style.fontSize = "25px";
    }
}

I deleted some font properties in css to avoid it getting longer. Please tell me if I need to add some more css from my original code.

Solution

Here's an updated snippet with the visibility issue fixed. There must be additional css that you didn't include above, but the main idea is here. Click the hamburger menu and the nav bar appears.

Two main problems I saw:

An overflow: hidden on the #nav
No transform: translateX(0) to bring the nav menu into position.

function navSlide() {

  let burger = document.querySelector(".burger");
  let nav = document.querySelector(".nav-links");
  let navLinks = document.querySelectorAll(".nav-links li");
  //toggle nav
  burger.addEventListener("click", function() {
    nav.classList.toggle('nav-active');
    //animate links
    navLinks.forEach((link, index) => {
      if (link.style.animation) {
        link.style.animation = "";
      } else {
        link.style.animation = `navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s`;
      }

    });
    //burger animation
    burger.classList.toggle('toggle');

  });


}

navSlide();

//sticky nav bar with transitions javascript

// When the user scrolls down 80px from the top of the document, resize the navbar's padding and the logo's font size
window.onscroll = function() {
  scrollFunction()
};

function scrollFunction() {
  if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) {
    document.getElementById("navbar").style.padding = "2px 10px";
    document.getElementById("logo").style.fontSize = "20px";
  } else {
    document.getElementById("navbar").style.padding = "10px 10px";
    document.getElementById("logo").style.fontSize = "25px";
  }
}

:root,
html,
body {
  height: 100%;
  width: 100%;
}

#navbar {
  position: fixed;
  top: 0px;
  display: flex;
  padding: 10px 10px;
  /* Large padding which will shrink on scroll (using JS) */
  transition: 0.4s;
  /* Adds a transition effect when the padding is decreased */
  justify-content: space-around;
  align-items: center;
  min-height: 8vh;
  width: 100%;
  background-color: #55426e;
  z-index: 4;
}

.sticky {
  padding: 5px 10px;
}

.burger {
  display: none;
  cursor: pointer;
  padding: 5px;
  z-index: 3;
}

.burger div {
  width: 23px;
  height: 3px;
  background-color: aliceblue;
  margin: 5px;
  transition: all 0.3s ease;
  border-radius: 10px;
}

@media screen and (max-width: 1024px) {
  .nav-links {
    width: 65%;
  }
}

@media screen and (max-width: 768px) {
  body {
    overflow-x: hidden;
  }
  .nav-links {
    position: absolute;
    right: 0px;
    height: 92vh;
    top: 8vh;
    background-color: #55426e;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
    transform: translateX(100%);
    transition: transform 0.5s ease-in;
  }
  .nav-links li {
    opacity: 0;
  }
  .burger {
    display: block;
  }
  .nav-links.nav-active {
    transform: translateX(0);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }
  .nav-links.nav-active li,
  .nav-links.nav-active li a {
    list-style: none;
    opacity: 1;
    color: white;
    text-decoration: none;
  }
  #navbar {
    overflow: visible;
    padding: 2px 10px !important;
    /* Use !important to make sure that JavaScript 
        doesn't override the padding on small screens */
  }
}

.withpic {
  position: relative;
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5)), url(aboutme2.JPG);
  height: 100vh;
  background-size: cover;
  background-position: center;
}

.wopic {
  position: relative;
  background-color: #ddd5e2;
  padding-top: 20px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-around;
  padding-left: 50px;
  padding-right: 50px;
  padding-bottom: 50px;
}

.under {
  position: relative;
  z-index: 3;
}


/*sticky nav bar -- from w3schools*/

.overtext {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  color: #ddd5e2;
  text-align: center;
  position: relative;
  z-index: -99;
}

<DOCTYPE! html>
  <html>

  <head>
    <title>Website</title>
    <link href="ask.css" rel="stylesheet" type="text/css" />
  </head>

  <body>
    <div class="withpic">
      <nav>
        <div id="navbar">
          <div id="logo">
            <h4>logo</h4>
          </div>
          <ul class="nav-links">
            <li><a href="#"> HOME </a></li>

            <li><a href="#"> ABOUT </a></li>

            <li><a href="#"> PHOTOGRAPHY </a></li>

            <li><a href="#"> ORGANIZER </a></li>

            <li><a href="#"> CONTACT </a></li>
          </ul>
          <div class="burger">
            <div class="line1"></div>
            <div class="line2"></div>
            <div class="line3"></div>
          </div>
        </div>
      </nav>

      <div class="lefty under">
        <div class="overtext">
          <h1>About Me</h1>
          <em>
                        私について
                    </em>
        </div>
      </div>

    </div>
    <div class="wopic">
      <p>section without picture</p>
    </div>
    <script src="app.js"></script>
    <script src="nav.js"></script>
  </body>

  </html>