- This topic has 13 replies, 2 voices, and was last updated 3 years, 9 months ago by David.
-
AuthorPosts
-
July 23, 2020 at 3:47 am #1373199Helen
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,
HelenJuly 23, 2020 at 5:17 am #1373282DavidStaffCustomer SupportHi there,
See this topic for the CSS and Javascript you require:
https://generatepress.com/forums/topic/menu-navigation/#post-1363283
July 23, 2020 at 6:58 am #1373407HelenHi 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,
HelenJuly 23, 2020 at 7:15 am #1373426DavidStaffCustomer SupportAdd 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>
July 23, 2020 at 7:26 am #1373434HelenHi 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,
HelenJuly 23, 2020 at 7:32 am #1373448DavidStaffCustomer SupportI 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
July 23, 2020 at 8:27 am #1373680HelenHi David,
I replaced the javascript with your amended script and I have the css in Appearance > Simple CSS, but it still does nothing.
Thanks,
HelenJuly 23, 2020 at 8:36 am #1373686DavidStaffCustomer SupportEdited 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 */ }
July 23, 2020 at 8:39 am #1373688HelenSorry, it’s still not doing anything. Completely understand if this is above and beyond what’s reasonable for me to ask your help with!
July 23, 2020 at 8:42 am #1373689DavidStaffCustomer SupportI 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
July 23, 2020 at 9:01 am #1373706HelenI’ve added the revised code and still nothing.
July 23, 2020 at 9:44 am #1373763DavidStaffCustomer Supporthmmm…. 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.July 23, 2020 at 10:02 am #1373785HelenThnak you! That is working. ๐
July 23, 2020 at 1:06 pm #1373961DavidStaffCustomer Supportthats great ๐ Glad to be of help
-
AuthorPosts
- You must be logged in to reply to this topic.