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">×</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);