darken background when mega menu is active

[Helen]

Hi,

I am trying to create the background overlay effect as shown when you hover over the menu on this website: https://www.eastmidlandsairport.com/ where the web page darkens as the mega menu appears.

I am using the Max Mega Menu plugin with the GP Premium theme. Can you help me achieve this?

Thanks,
Helen

[David]

Hi there,

See this topic for the CSS and Javascript you require:

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Helen]

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

[David]

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>

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Helen]

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

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Helen]

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

[David]

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 */
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Helen]

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!

[David]

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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Helen]

I’ve added the revised code and still nothing.

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Helen]

Thnak you! That is working. 🙂

[David]

thats great 🙂 Glad to be of help

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts