[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
    Posts
  • #1611411
    Joshua

    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.

    #1613748
    Elvin
    Staff
    Customer Support

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

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