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.