Adding an overlay when the submenu is collapsed

Dear support team,

I build a 2-level mega-menu, with the submenus opening on click on my website. I want like to add an overlay to darken the rest of the page when the submenus are collapsed.

To do so, I added an empty container block to my header, and applied the following style :

.header__overlay {
    display: none;
    height: 100%;
    width: 100%;
    position: absolute;
    background: rgba(0,0,0,0.5);
    z-index:99;
}

My idea was to change “display: none” to display: block” when a submenu is displayed, but I don’t know what would be the best way to do so.

Is there a proper way to achive this ? I apologize if this is a basic question but I am not fully comfortable with javascript.

Thank you in advance for your help.

• This topic was modified 3 days, 14 hours ago by doowayne.