darken background when mega menu is active

Hi there,

See this topic for the CSS and Javascript you require:

https://generatepress.com/forums/topic/menu-navigation/#post-1363283

Hi David,

I did see that and added the javascript to code snippets, but it returned an error. Please see this screengrab. https://snipboard.io/sGo8z9.jpg

I don't know enough javascript to know how to fix this. Can you see what's going wrong?

Thanks,
Helen

Add the jQuery to a WP_Footer hook wrapped in <script> tags like so:

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

Hi David

I added the javascript as a hook in wp_footer as per the screengrab and set the display rules to the entire site, but it is having no affect. I tried with the Execute PHP ticked and unticked to see if it was that, but no joy. I guess it must be some issue with me using a mega menu plugin? Do you think this is likely?

Thanks,
Helen

I updated the jQuery above to work with the mega menu items.

Make sure to add the CSS to your child theme styles.css or the Customizer > Addtional CSS

Hi David,

I replaced the javascript with your amended script and I have the css in Appearance > Simple CSS, but it still does nothing.

Thanks,
Helen

Edited jquery above

and in this part of the CSS add the z-index property i have included here:

#page:before {
    content: '';
    position: absolute;
    pointer-events: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    visibility: visible;
    opacity: 0.5;
    transition: opacity 0.2s ease-in;
    z-index: 1; /* Add this */
}

Sorry, it's still not doing anything. Completely understand if this is above and beyond what's reasonable for me to ask your help with!

I am not seeing the updated javascript.
Can you make sure this code has been added:

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

I've added the revised code and still nothing.

hmmm.... edit the hook element containing the script and try increasing the priority to a a very large number eg. 500 This should execute the script later in the load process.

Thnak you! That is working. :)

thats great :) Glad to be of help