I am currently working on a web page that features a background image and six interactive tiles which act as links. These elements are all housed within a parent element with the id of "main". Additionally, I have implemented a side navbar that shifts the content to the right when activated.
I would like to enhance the design by adding some opacity to the #main container, but I'm encountering some difficulties in achieving this effect.
Below is the excerpt from my JavaScript code related to the functionality of the Side Navbar. In this snippet, I attempted to modify the background color, even though I understand that it may not be the correct approach. Can you provide guidance on how to incorporate opacity for the entire page?
document.getElementById("myBtn").addEventListener("click", toggleNav);
function toggleNav(){
navSize = document.getElementById("mySidenav").style.width;
if (navSize === "400px") {
return close();
}
return open();
}
function open() {
document.getElementById("mySidenav").style.width = "400px";
document.getElementById("main").style.marginLeft = "400px";
document.getElementById("main").style.backgroundColor = "yellow";
}
function close() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
document.getElementById("main").style.backgroundColor = "white";
}