- This topic has 13 replies, 2 voices, and was last updated 7 months, 2 weeks ago by
David.
-
AuthorPosts
-
July 23, 2020 at 3:47 am #1373199
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,
HelenJuly 23, 2020 at 5:17 am #1373282David
StaffCustomer SupportHi 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/July 23, 2020 at 6:58 am #1373407Helen
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,
HelenJuly 23, 2020 at 7:15 am #1373426David
StaffCustomer 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>
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/July 23, 2020 at 7:26 am #1373434Helen
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,
HelenJuly 23, 2020 at 7:32 am #1373448David
StaffCustomer 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
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/July 23, 2020 at 8:27 am #1373680Helen
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,
HelenJuly 23, 2020 at 8:36 am #1373686David
StaffCustomer 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 */ }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/July 23, 2020 at 8:39 am #1373688Helen
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!
July 23, 2020 at 8:42 am #1373689David
StaffCustomer 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
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/July 23, 2020 at 9:01 am #1373706Helen
I’ve added the revised code and still nothing.
July 23, 2020 at 9:44 am #1373763David
StaffCustomer 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.Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/July 23, 2020 at 10:02 am #1373785Helen
Thnak you! That is working. π
July 23, 2020 at 1:06 pm #1373961David
StaffCustomer Supportthats great π Glad to be of help
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/ -
AuthorPosts
- You must be logged in to reply to this topic.