[Resolved] Menu dropdown background overlay

[Joshua]

Hi GP Team,

I found this post here and Tom provided some CSS, but that CSS didn’t work properly on my site: https://generatepress.com/forums/topic/navigation-overlay/

I’d like to have a background overlay on my site when someone opens the mega menu. Similar to the off-canvas menu on mobile, when that menu opens the background goes dark. I’d like to do that except on desktop. Is this possible?

My site for reference: https://mayofi.com/

[Joshua]

I also found this on StackOverflow, but cannot figure out how to implement the JS into my site https://stackoverflow.com/questions/28542956/show-overlay-in-background-when-hovering-over-parent-menu-items

[Elvin]

Hi,

Try adding a Hook Element with this code hooked to generate_after_header with Display rule location of “Entire site”.

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

And then, add another Hook Element with this script hooked to wp_footer with Display rule location of “Entire site”.

<script>
jQuery('ul#menu-primary-menu-1').hover(function(){
    jQuery('#overlay').fadeTo(200, 1);
}, function(){
    jQuery('#overlay').fadeTo(200, 0, function(){
        jQuery(this).hide();
    });
}); 
</script>

You then add this CSS:

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

Here’s how to add CSS: https://docs.generatepress.com/article/adding-css/

[Joshua]

Hey Elvin,

Thanks for the quick reply! I followed these steps. However, when I hover over the menu, it blinks repeatedly. Here’s a quick video of it: https://mayofi.com/wp-content/uploads/2021/01/Screen-Recording-2021-01-04-at-10.32.25-PM.mp4

[Elvin]

Try adding this CSS:

header#masthead {
    z-index: 10000;
}

So that the header doesn’t get masked by the overlay just incase it is.

You then change the script a bit to this:

<script>
jQuery('div#primary-menu').hover(function(){
    jQuery('#overlay').fadeTo(200, 1);
}, function(){
    jQuery('#overlay').fadeTo(200, 0, function(){
        jQuery(this).hide();
    });
}); 
</script>

[Joshua]

Hey Elvin,

Unfortunately, it’s still doing the quick flickering even with the modified code.

[Elvin]

Let’s modify the approach a bit:

Replace the previous script with this:

<script>
const nav = document.querySelector('div#primary-menu ul.sf-menu');
const overlay = document.querySelector('#overlay');

var fadeOut_handler = function(){
overlay.classList.remove('is-overlay-on');
};

var fadeIn_handler = function(){
overlay.classList.add('is-overlay-on');
};

nav.addEventListener('mouseover',fadeIn_handler,false);
nav.addEventListener('mouseout',fadeOut_handler,false);
</script>

Then add this CSS:

#overlay.is-overlay-on{
	display:block;
	animation: fadeInOverlay 0.2s linear;
}

@keyframes fadeInOverlay {
  from {opacity:0;}
  to {opacity:1;}
}

@keyframes fadeOutOverlay {
  from {opacity:1;}
  to {opacity:0;}
}

Here’s how it’s behaving: https://share.getcloudapp.com/L1uOyZQx

Here’s the demo site if you wanna check or get a feel of it.

[Joshua]

Hey Elvin,

I regret to say that this didn’t work for me. There must be something else on my site conflicting this?

[Elvin]

I regret to say that this didn’t work for me. There must be something else on my site conflicting this?

Can you try disabling all the caching plugin and see what happens? Let us know.

[Joshua]

I disabled my caching plugin, WP Rocket, and still nothing. I even deactivated all the plugins except GP Premium, and still nothing. I cleared my browser cache, website cache, and server cache and tried, and unfortunately still nothing.

[David]

Hi there,

the blinking is most likely occurring because the overlay is blocking the menu item, which stops the hover event, which removes the overlay, and the hover works again…. rinse and repeat.

Try adding pointer-events: none; to your #overlay styles so it doesn’t block the hover.

Alternatively a pure CSS method:

#site-navigation:hover + #page:before {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;   
}
#page {
    position: relative;
}
#page:before {
    content: '';
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 100;
    opacity: 0;
}

The caveats are, it applies to the entire Navigation being hovered, and relies on the #page element to be immediately after the nav, so that means removing the overlay element and any other hooked elements that come between the nav and the #page.

[Joshua]

Ahh, that was the culprit David thanks!

After some testing, it seems a little wonky. For example, the mouseover event doesn’t always trigger the background overlay, even if the menu is triggered. Also, the menu gets the dark overlay effect as well instead of just the content. I changed top: 0; to top: 1; and that seemed to fix the menu getting the dark overlay, however, it also adds an extra right scrollbar for some reason.

I don’t want to waste any more of your guy’s time, you’ve been too helpful! I’ll hire a developer on Upwork who can take a closer look at my situation and help me out.

Thanks so much again David and Elvin!

[David]

Glad we could be of help.
Happy to take another look at the overflow issue and the wonky mouse over event if you want…

[Joshua]

Hey David,

I don’t want to take up too much of your time, I know this is probably outside of the support scope anyways and I really respect your guys time and willingness.

Thanks as always, David!

Edit: I’ll post the code that worked for me soon

[David]

That would be awfully kind of you 🙂 Hope you find an answer soon

[Author]

Posts