Responsive nav overlapped behind content with Scrollreveal

Question

i got a problem with my website that I made, it seems that my sidebar is overlapped within my content, I already turned the z-index to high. this only occurs when I implemented the scrollreveal js animation Problem:

HTML

    <!-- Nav -->
    <header>
      <div class="border">
        <div class="logo">
          <img src="../images/site_logo.png" alt="Borcelle-logo" />
          <h2>Borcelle</h2>
        </div>

        <nav>
          <!-- Sidebar (for smaller screens) -->
          <ul class="sidebar">
            <li onclick="hideSidebar()">
              <a href=""
                ><img
                  src="../images/close_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.svg"
                  alt=""
                  style="background-color: black; border-radius: 100%"
              /></a>
            </li>
            <li>
              <a
                href="Home.html"
                style="
                  color: var(--nav-bar-clicked);
                  font-weight: 600;
                  font-size: 1em;
                "
                >Home</a
              >
            </li>
            <li><a href="About.html">About</a></li>
            <li><a href="Courses.html">Courses</a></li>
            <li><a href="Shop.html">Shop</a></li>
            <li><a href="Contact.html">Contact</a></li>
          </ul>

          <!-- Navbar -->
          <ul>
            <li class="hideOnMobile">
              <a
                href="Home.html"
                style="
                  color: var(--nav-bar-clicked);
                  font-weight: 600;
                  font-size: 1em;
                "
                >Home</a
              >
            </li>
            <li class="hideOnMobile"><a href="About.html">About</a></li>
            <li class="hideOnMobile"><a href="Courses.html">Courses</a></li>
            <li class="hideOnMobile"><a href="Shop.html">Shop</a></li>
            <li class="hideOnMobile"><a href="Contact.html">Contact</a></li>
            <li class="menu-button" onclick="showSidebar()">
              <a href="#"
                ><img
                  src="../images/menu_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.svg"
                  alt=""
                  style="background-color: #d1c8c1"
              /></a>
            </li>
          </ul>
        </nav>
      </div>
    </header>

CSS

.sidebar {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 999;
  height: 100vh;
  width: 250px;
  background-color: rgba(255, 255, 255, 0.132);
  backdrop-filter: blur(10px);
  box-shadow: -10px 0 10px rgba(0, 0, 0, 0.1);
  display: none;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.menu-button {
  display: none;
}

@media (max-width: 780px) {
  .hideOnMobile {
    display: none;
  }

  .menu-button {
    display: block;
  }
}

Javascript (sidebar function alongside w/ scrollreveal)

//Sidebar Functions
function showSidebar() {
  const sidebar = document.querySelector(".sidebar");
  sidebar.style.display = "flex";
}

function hideSidebar() {
  const sidebar = document.querySelector(".sidebar");
  sidebar.style.display = "none";
}

ScrollReveal({
  reset: true,
  distance: "60px",
  duration: 2500,
  delay: 400,
});

//Navigation Animation

ScrollReveal().reveal("nav", {
  delay: 200,
  origin: "right",
});

ScrollReveal().reveal(".menu-button", {
  delay: 200,
  origin: "right",
});

ScrollReveal().reveal("header", {
  delay: 300,
  origin: "left",
});

actually tried setting each of my content into position so i can control the z-index and lower it but ti still doesnt work

Answer 1

Maybe set the z-index for the whole header to a higher level.

header {
    z-index: 999999 !important;
}

You might not have to add the !important, but sometimes it's needed to overwrite it.

Furthermore, you can try open the dev tools / developer console in your browser (press F12) and find out which element exactly is overlapping the sidebar. It may help to find a solution.