- This topic has 9 replies, 3 voices, and was last updated 1 year, 9 months ago by Fernando.
-
AuthorPosts
-
June 10, 2022 at 10:38 am #2249577Robyn
Hi,
I am using a MegaMenu (GP css) with 4 columns. Each column has a Heading and a submenu. I recently switched the Primary Navigation setting for Navigation Dropdown to Click – Menu Item as I want the mega menu to stay open instead of disappearing when hovering. The Headings are pages that should click through to their page and they stopped working.I found this thread and followed it through, installed the JS script enqueuing in footer, added a class to the Heading menu items and can see the console output – they are showing as links but still not clickable from the menu.
https://generatepress.com/forums/topic/disable-dropdown-menu-click-on-third-level-sub-menus/
Perhaps I missed something small? I cleared all the caches, plugins are up to date.
June 11, 2022 at 3:49 am #2250011DavidStaffCustomer SupportHi there,
try the following:
1. Edit the Menu, and give each of the ‘broken’ parent items a CSS Class of:
forced-click
https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#custom-classes
2. Create a new Hook element in Appearance > Elements.
Add this to the hook:<script> var customLinks = document.querySelectorAll( '.forced-click a' ); for ( var i = 0; i < customLinks.length; i++ ) { console.log(customLinks[ i ]); customLinks[ i ].addEventListener( 'click', function() { var url = this.getAttribute( 'href' ); console.log(url); window.location = url; } ); } </script>
Set the Hook to
wp_footer
Set the Display Rules toEntire Site
June 11, 2022 at 10:52 am #2250397RobynHi David,
I did the above, added the Hook, added the class on the parent menu items. I can see the class is added to the li element and the console outputs the link, but the links still don’t click through to their page. I’m testing on desktop only for now. (The mobile links are broken too, but I assume it will be the same solution?)Menu class added:
June 12, 2022 at 5:23 pm #2251406Fernando Customer SupportHi Robyn,
I see. Can you try altering the Javascript code to this?:
<script> var customLinks = document.querySelectorAll( '.forced-click a' ); for ( var i = 0; i < customLinks.length; i++ ) { console.log(customLinks[ i ]); customLinks[ i ].addEventListener( 'click', function() { var url = this.getAttribute( 'href' ); console.log(url); window.location.href = url; } ); } </script>
Kindly let us know how it goes!
June 13, 2022 at 8:34 am #2252196RobynHi Fernando,
I changed the script inside my GP Element (Entire Site) and it hasn’t changed anything.
I have the Primary Nav set to “Click-Menu Item”.
I appreciate your help!
-RobynJune 13, 2022 at 8:33 pm #2252658Fernando Customer SupportHi Robyn,
I see. Thank you for testing. Can you try modifying it to this?:
<script> var customLinks = document.querySelectorAll( '.forced-click a' ); var customMenuParents = document.querySelectorAll( '.forced-click.menu-item-has-children' ); const cparentlength = customMenuParents.length; const clinkslength = customLinks.length; for ( var b = 0; b < cparentlength; b++ ) { customMenuParents[ b ].classList.remove('menu-item-has-children'); } for ( var i = 0; i < clinkslength; i++ ) { console.log(customLinks[ i ]); customLinks[ i ].addEventListener( 'click', function(event) { event.stopPropagation(); var url = this.getAttribute( 'href' ); console.log(url); window.location.href = url; } ); } </script>
Then, set the priority of the element to
1
.Kindly let us know how it goes.
June 14, 2022 at 8:56 am #2253358RobynHi Fernando!
That works on desktop – no errors. Thank you!On Mobile, I’m using the OffCanvas menu – I added the .forced-click class to the menu items with submenus and now the top level clicks through to it’s page, but the dropdown doesn’t work. The ones without submenus work and click through to their page, but the four with submenus won’t allow the arrow to click the submenu visible.
The arrows all moved up and squished to the left after the new css. I added padding-left to move them out from the text, but can’t seem to get them to move down any. Almost like it’s wrapping the whole menu item + arrow into the link?
I appreciate your help. I’m not tied to the offcanvas layout if there is an easier way to get it to work. I just want to have the top level click to it’s page, and submenus show on arrow click. And I realize this is a different function than on the mega menu. Can they exist at the same time?
-Robyn
June 14, 2022 at 6:17 pm #2253603Fernando Customer SupportI see. They can exist at the same time.
Two things we could try(It would be good to read both options first and see what you wish to try first.):
1. You could add this PHP snippet:
add_filter( 'generate_hook_element_display', function( $display, $element_id ) { if ( 395510 === $element_id && wp_is_mobile() ) { $display = false; } return $display; }, 10, 2 );
Kindly replace
395510
with the ID of your Hook Element. You can view the ID when editing the Hook as such: https://share.getcloudapp.com/5zurGm6jAdding PHP reference: https://docs.generatepress.com/article/adding-php/#code-snippets
This code would disable the JS code we added on mobile.
2. Set the Navigation Dropdown to Click – Arrow in Appearance > Customize > Layout > Primary Navigation as such: https://share.getcloudapp.com/5zurGmzj
Then, use this JS instead, which is the initial JS we had:
<script> var customLinks = document.querySelectorAll( '.forced-click a' ); for ( var i = 0; i < customLinks.length; i++ ) { console.log(customLinks[ i ]); customLinks[ i ].addEventListener( 'click', function() { var url = this.getAttribute( 'href' ); console.log(url); window.location.href = url; } ); } </script>
This would make the text a clickable link, and only the arrow would act as the dropdown button.
Then we could hide the dropdown icon for the mega menu headers on tablet/desktop through CSS.
You can try adding this CSS through Appearance > Customize > Additional CSS:
@media (min-width: 769px) { .forced-click > a > span.dropdown-menu-toggle { display: none; }
I believe your breakpoint is at
1026px
so you can replace769
with1026
instead.Personally, I believe option 2 would be the better approach.
Kindly let us know how it goes.
June 15, 2022 at 9:01 am #2254398RobynFernando (and all GP support team!) you are the BEST!
I did option 2, went back to the original menu click JS, changed the Primary Nav to Click – Arrow and I didn’t need to add the last css bit because it was in the Mega Menu css already. Everything seems to be working now. Mega menu parent headings click through to their page on desktop and on mobile-off-canvas. Dropdowns work when clicking on arrow on mobile.
Thank you so much!
Have a great week.-Robyn
June 15, 2022 at 5:49 pm #2254782Fernando Customer SupportYou’re welcome Robyn! Glad it’s working now!
-
AuthorPosts
- You must be logged in to reply to this topic.