- This topic has 19 replies, 3 voices, and was last updated 1 year, 8 months ago by
Tom.
-
AuthorPosts
-
October 6, 2020 at 3:29 pm #1475411
maxms
Hello.
I am using the navigation dropdown on click option. I have created a mega menu on one item which has two columns. In each column is one sub-item with it’s own sub-menu. So, the parent sub-items are also taking on the click option and I don’t want this. They need to go to their own urls.
Is there a way to append or override the dropdown-click script to only work on the very top level of the main navigation?
Thank you!
P.S. This seemed to work correctly before updating to 3.0.
October 6, 2020 at 6:18 pm #1475554Elvin
StaffCustomer SupportHi,
P.S. This seemed to work correctly before updating to 3.0.
Can you try purging site cache and see if it works correctly again?
Let us know how it goes.
A wise man once said:
"Have you cleared your cache?"October 7, 2020 at 10:23 am #1477021maxms
It’s close. The submenu arrow is gone and it doesn’t seem to be trying to toggle but the link on the parent (2nd level) isn’t working. The link shows when hovering but it goes nowhere.
Thanks!
October 7, 2020 at 2:52 pm #1477471Tom
Lead DeveloperLead DeveloperStrange, I don’t remember this functionality changing in 3.0.0.
We could look at adding some custom javascript on your site that forces those links to go to their destination? If that sounds good, you would need to add a custom class to each of those two menu items that we can target with the JS.
Then you could do this:
<script> var customLinks = document.querySelectorAll( '.your-custom-class a' ); for ( var i = 0; i < customLinks.length; i++ ) { customLinks[ i ].addEventListener( 'click', function() { var url = this.getAttribute( 'href' ); window.location = url; } ); } </script>
Not 100% sure it’ll work, but should in theory 🙂
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentOctober 7, 2020 at 3:07 pm #1477490maxms
Howdy,
Thanks so much for your response. I’ve added that script to a js file in my child theme and enqueued it. It seems to be loading correctly. I also added the custom class to those two menu items. However, the links still aren’t working. The sfHover class is still being added to those – does that make a difference? I feel like we should be removing the dropdown somehow as well.
Thanks again,
October 7, 2020 at 9:49 pm #1477752Tom
Lead DeveloperLead DeveloperAh, forgot the forums strips
[ i ]
without the spaces. Try the updated code: https://generatepress.com/forums/topic/disable-dropdown-menu-click-on-third-level-sub-menus/#post-1477471Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentOctober 8, 2020 at 9:49 am #1478887maxms
Hi Tom,
The new code doesn’t seem to make a difference with those links. I can see the link when hovering over them and the
<a>
tag is there in the source code so I am not sure what is blocking the link action.Thanks so much for your time on this.
October 8, 2020 at 2:45 pm #1479280Tom
Lead DeveloperLead DeveloperLet’s debug a little:
var customLinks = document.querySelectorAll( '.your-custom-class 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; } ); }
Does anything show up in the console when the items are clicked?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentOctober 9, 2020 at 11:28 am #1480943maxms
No, nothing shows in the console on click with the new code.
October 9, 2020 at 1:27 pm #1481091Tom
Lead DeveloperLead DeveloperWhat about now?: https://generatepress.com/forums/topic/disable-dropdown-menu-click-on-third-level-sub-menus/#post-1479280
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentOctober 12, 2020 at 1:39 pm #1485579maxms
Still the same. No link and no console message. Sorry this is such a pain!
October 12, 2020 at 3:57 pm #1485726Tom
Lead DeveloperLead DeveloperWeird – what about now?: https://generatepress.com/forums/topic/disable-dropdown-menu-click-on-third-level-sub-menus/#post-1479280
Sorry for the debugging process – nothing is standing out as being broken quite yet.
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentOctober 13, 2020 at 11:38 am #1487294maxms
OK, got the following error in console:
Uncaught TypeError: Cannot read property ‘getAttribute’ of null
at HTMLAnchorElement.t (dropdown-click.min.js?ver=3.0.1:1)
t @ dropdown-click.min.js?ver=3.0.1:1Does that tell us anything?
P.S. When I click on the error link it takes me to Line 1, Column 2224 in dropdown-click.min.js.
October 13, 2020 at 11:52 am #1487317Tom
Lead DeveloperLead DeveloperHmm, not what I expected – nothing else in the console? Does that error go away if you undo the code we added?
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentOctober 14, 2020 at 12:58 pm #1489191maxms
Hi,
No, and actually I can’t recreate that error with the added code either so I’m not sure what that was. Sorry!
I’m not sure what to do here. I tried to rethink it but nothing else allows for the appearance that I need.
-
AuthorPosts
- You must be logged in to reply to this topic.