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?
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);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;
}
.burger-icon {
position: absolute;
top: 40%;
left: 50px;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
cursor: pointer;
border-radius: 40%;
background-color: #1b2225;
transition: background-color 0.3s ease;
}
.burger-icon span {
position: absolute;
width: 25px;
height: 4px;
background-color: #ffffff;
transition: all 0.3s ease;
}
.burger-icon span:first-child {
top: 23px;
}
.burger-icon span:last-child {
top: 32px;
}
.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;
}<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">×</div>
</div>
<div class="frontimage">
<img src="https://picsum.photos/536/354" alt="frontimage">
<div class="overlay-text">
</div>
</div>3