[Resolved] Menu dropdown background overlay

Home Forums Support [Resolved] Menu dropdown background overlay

Home Forums Support Menu dropdown background overlay

Viewing 2 posts - 16 through 17 (of 17 total)
  • Author
  • #1611411

    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">
    jQuery(document).ready(function($) {
    $("#site-navigation .menu-item-object-category.menu-item-has-children").hover(function(){
    	jQuery(this).parent().find(" > li").removeClass("nav-menu-active");
    }, function(){
    		if( jQuery("#site-navigation li.nav-menu-active").length == 0) {
    	}, 50);
    $('a').each(function() {
    var a = new RegExp('/' + window.location.host + '/');
    if(!a.test(this.href)) {
    $(this).click(function(event) {
    window.open(this.href, '_blank');

    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.

    Customer Support

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

    A wise man once said:
    "Have you cleared your cache?"

Viewing 2 posts - 16 through 17 (of 17 total)
  • You must be logged in to reply to this topic.