Image clipping through navbar when I change opacity – Blancer.com Tutorials and projects

I am using JavaScript to make the background content of my webpage have reduced opacity when the ‘sidebar’ appears.

I have div with the class “burger-icon” which is inside the nav.

I have div with the class “sidebar sidebar-hidden”, which is a hidden sidebar that appears when you click the burger-icon.

And finally, I have a div with the class “frontimage”, which is an image underneath the navbar.

I added position: sticky; to the nav, and now I’ve noticed that when I hit the burger-icon, the image is appearing on-top of the nav when I open the sidebar. This is happening because my background-color for the nav is white, and with the reduced opacity, the image appears through the nav. Changing the z-index doesn’t solve this problem. Does anyone have any ideas?

Here is my html:

<body>
    <nav>
        <div class="burger-icon">
            <span></span>
            <span></span>
        </div>
        <div class="bottom-bar"></div>
    </nav>

    <div class="sidebar sidebar-hidden">
        <div class="close-btn">&times;</div>
    </div>

    <div class="frontimage">
        <img src="imagesa320new.jpg" alt="frontimage">
        <div class="overlay-text">
        </div>
    </div>
</body>

Here is my css:

nav{
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 1;
  background-color: #fff;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Copperplate, Papyrus, fantasy;
  padding-bottom: 50px;
}

.sidebar {
  z-index: 2;
  position: fixed;
  top: 0;
  width: 500px;
  height: 100%;
  background-color: #fa9537;
  text-align: center;
  text-transform: uppercase;
  font-family: Verdana, sans-serif;
}

.sidebar-hidden {
  display: none;
}

.nav-hidden {
  opacity: 0.5;
}

and here is my JavaScript code:

const sidebar = document.querySelector(".sidebar");
const burgericon = document.querySelector(".burger-icon");
const closebtn = document.querySelector(".close-btn");
const nav = document.querySelector("nav");
const frontimage = document.querySelector(".frontimage");

const opensidebar = function () {
  sidebar.classList.remove("sidebar-hidden");
  nav.classList.add("nav-hidden");
  frontimage.classList.add("nav-hidden");
};

const closesidebar = function () {
  sidebar.classList.add("sidebar-hidden");
  nav.classList.remove("nav-hidden");
  frontimage.classList.remove("nav-hidden");
};

burgericon.addEventListener("click", opensidebar);
closebtn.addEventListener("click", closesidebar);