JS Overlay background

Question

I want to ask you a very simple question. Im trying to make a nav-mobile which opens whenever you touch the hamburger button. Everything works fine but I wanted to add a "darker" background to the main page. I ended up doing something like:

JS CODE:

var Opened =  document.getElementById('menu-open');
var Closed =  document.getElementById('menu-close');
function OpenNav()
{
    if (Opened.getAttribute('src') == "news-homepage-main/assets/images/icon-menu.svg"){
        document.getElementById('nav-mobile').style.width = '250px';
        document.body.style.backgroundColor = "black";
    }
}
function CloseNav()
{
    if (Closed.getAttribute('src') == "news-homepage-main/assets/images/icon-menu-close.svg"){
        document.getElementById('nav-mobile').style.width = '0';
        document.body.style.backgroundColor = "";
    }   
}

BLACK COLOR CHOICE IS ONLY A TEST, the color I chose is to let you see how the results is. Still doesn't work, look at the image. Thanks!

I tried so far to change the:

document.body.style.backgroundColor = "black";

to a filter. Still not working. I tried to make even an overlay div, but still with no success.

Is `body` really the element you want to set `background` on? I suspect it's something inside `body` like a `div` or `main`. Would be helpful if you posted a codesandbox (or whatever) live example. — currenthandle, Nov 16 '22 at 16:48
I propose to use an overlay-div with transparency. How to fill the whole page is described here: https://stackoverflow.com/questions/2852276/make-div-overlay-entire-page-not-just-viewport If needed you can place the menu over the overlay with a higher z-index. — Onki Hara, Nov 16 '22 at 16:51

Coolis · Answer 1 · 2022-11-17T07:29:56.943

My guess on what you want here is an overlay with a light dark background that will be placed in front of your main page when the side nav is opened and hidden when the side nav is closed. I would suggest an absolute element that takes full width and height of the page. Something like this:

<div id="overlay"></div>

With the rules below:

#overlay {
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.7);
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    z-index: 2;
 }

Have in mind you need to adjust your side-navs z-index to be less than the z-index of the overlay so it will be in front.

And in your function that open and closes the sidebar you should show and hide it accordingly. Something like this:

function OpenNav()
{
    if (Opened.getAttribute('src') == "news-homepage-main/assets/images/icon-menu.svg"){
        document.getElementById('nav-mobile').style.width = '250px';
        document.getElementById('overlay').style.display = 'block';
    }
}

function CloseNav()
{
    if (Closed.getAttribute('src') == "news-homepage-main/assets/images/icon-menu-close.svg"){
        document.getElementById('nav-mobile').style.width = '0';
        document.getElementById('overlay').style.display = 'none';
    }   
}

JS Overlay background

1 Answers1