Help w. dimming page when menu open

  • I’m using the Max Mega Menu plugin to build a new menu for our company’s site. I’d link for you to see the menu I’m talking about but it’s being built in our dev-site which is behind password protection. I’m traditionally a UX designer and not much use with JS, but I’ve been following the instructions laid out in this thread, pretty much to the T:

    https://generatepress.com/forums/topic/darken-background-when-mega-menu-is-active/

    Without any luck. I wanted to see if I’m making any obvious errors – for example, the jquery should be in the Footer’s global JS when in the builder? The CSS should be added to the mega menu’s custom CSS styling, or to the page to be dimmed’s styling? Are there any portions of the snippets discussed in that thread that I need to alter? How do you change the priority of the JS for the footer, as mentioned at the end?

    I’m pretty sure this is a more complex question than anyone is going to want to assist with, but while I can handle virtually 99.9% of everything my company requests, this “bucket list” item from the concept became a must have in the office, and I’m struggling.

Viewing 1 replies (of 1 total)

  • Hi there,

    not sure if the code provided there is still applicable, but to add the jQuery you can use a PHP Snippet to do that:

    add_action('wp_footer', function(){
    echo '<script type="text/javascript">
    jQuery(document).ready(function($) {     
        $('li.mega-menu-item').hover(function(){     
            $('body').addClass('nav-focus');    
        },     
        function(){    
            $('body').removeClass('nav-focus');     
        });
    });
    </script>';
},500);

    And the CSS in that topic can go into Customizer > Additional CSS or your child themes style sheet ( is you’re using one ).

Viewing 1 replies (of 1 total)
  • The topic ‘Help w. dimming page when menu open’ is closed to new replies.