Menu dropdown background overlay

Okay, I got it to work beautifully! See for yourself by hovering over the menu options here: https://mayofi.com/

Here's the step-by-step solution:

1. Paste this CSS into your site:

#site-navigation {
	position: relative;
}

#site-navigation li.menu-item-has-children > ul.sub-menu {
	transition: none;
}

.nav-menu-bg-overlay {
	z-index: 20;
	background: rgba(21,21,21,.45);
	bottom: 0;
	display: none;
	left: 0;
	position: fixed;
	right: 0;
	top: 0px;
}

.nav-menu-bg-overlay.visible {
	display: block;
}

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

2. Paste this PHP into your functions.php:

/* adding div for menu hover overlay effect */
add_action('generate_before_header', function(){
	echo '<div class="nav-menu-bg-overlay"></div>';
});

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

3. Paste this script into your footer.php (alternatively, you can go to Elements > Add New Element > Hook then change the hook to wp_footer and paste your code in there):

<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function($) {

$("#site-navigation .menu-item-object-category.menu-item-has-children").hover(function(){
	
	jQuery("div.nav-menu-bg-overlay").addClass("visible");
	jQuery(this).parent().find(" > li").removeClass("nav-menu-active");
	jQuery(this).addClass("nav-menu-active");
	
}, function(){
	
	jQuery(this).removeClass("nav-menu-active");
	
	window.setTimeout(function(){
		
		if( jQuery("#site-navigation li.nav-menu-active").length == 0) {
			jQuery("div.nav-menu-bg-overlay").removeClass("visible");
		}
		
	}, 50);
});

$('a').each(function() {
var a = new RegExp('/' + window.location.host + '/');
if(!a.test(this.href)) {
$(this).click(function(event) {
event.preventDefault();
event.stopPropagation();
window.open(this.href, '_blank');
});
}
});
});
//]]>
</script>

And that's it! I hope this helps someone in the future. Keep in mind, I have not tested this on non-mega menu dropdowns, but it should work the same using the code above.

Nice one! Thank you for sharing this. Glad you got it to work. :D