Disable Dropdown Menu Click on third level sub menus

[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.

[Elvin]

Hi,

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?"

[maxms]

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!

[Tom]

Strange, 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-development

[maxms]

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,

[Tom]

Ah, 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-1477471

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[maxms]

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.

[Tom]

Let’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-development

[maxms]

No, nothing shows in the console on click with the new code.

[Tom]

What 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-development

[maxms]

Still the same. No link and no console message. Sorry this is such a pain!

[Tom]

Weird – 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-development

[maxms]

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:1

Does 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.

[Tom]

Hmm, 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-development

[maxms]

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.

[Author]

Posts