Pro : menu not clickable on mobile if it has a submenu

Support
#1

Hello,

how ca we achieve that a menu entry is clickable if it has one or more submenu entries at the mobile menu?
When we click on the menu entry it only opens the submenu.
When I click on the text it should open the link, if I click on the icon on the right site it should open the submenu.

Thanks in advanced.

Any update? menu not clickable on mobile if it has a submenu
#2

Hey,

To assist you with this issue, we’ll first need you to provide us with your URL and your WP credentials in a secure note. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL and the WP credentials, we will be happy to assist you with everything.

#3

ok, I hjave added the secure note with the infos.

The current used header is called “kinder”.

Hope to hear from you soon.

Thanks in advanced.

#4

Hi There,

Please add the following CSS under Customizer > Custom > Global CSS:

.x-menu > li > .x-anchor[class*="active"] ~ ul.sub-menu {
    height: auto !important;
}
#5

I have added it. But the same as before. No changes.
And I don´t think that this has something todo with the link.

#6

It seems to me that others has got the same problems:

This is an older post.
So any solution now?

The mobile menu isn’t usable if you can not click on any parent menu item.

#7

Hi there,

I checked our bug list and this is already added, for the meantime, please add this code to

jQuery( function($) {

$(document).on('click','.x-menu-collapsed .x-anchor-sub-indicator', function() {
//We can use stop propagation here, but that also prevents the sub-menu toggle effect
$(this).parent().parent().data('link', false);//so let's do it this way
} );

$(document).on('click', '.x-menu-collapsed a.x-anchor-menu-item', function(){

if ( $(this).data('link') !== true ) { //Don't link when the arrow down icon is clicked

$(this).data('link', true);

return false;

}

var url = $(this).attr('href');

if ( url.split('//').length == 2 ) { 
// the length will be always two if https://, http://, or just // is present

window.location = url;

}

} );


} );

And since the icon is too small, it will be harder to TAP it, please add this CSS to your global custom CSS as well.

.x-menu-collapsed .x-anchor-sub-indicator {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 85px;
    padding: 20px 0px;
}

Hope this helps.

2 Likes
#8

We wrote some javascript to handle this differently and it works now:

$(document).on('click', '.x-menu a.x-anchor-menu-item ', function(event){
        if(jQuery(event.target).hasClass('x-anchor-sub-indicator')) {
        	event.preventDefault();
        } else {
        	var url = $(this).attr('href');
        	window.location = url;
        }
});
#9

Hey @clevyr,

Thanks for writing around! Glad you’ve sorted it out and thank you for sharing with us.

Cheers!

#12

Hi @kevin_hermann,

Looks like you’ve withdrawn your post, do let us know of you need any assistance.

Thanks!

#13

Hi @Nabeel
works now good with the js code of clevyr.

Just forgot the } ); at the end :slight_smile:
Thank you

#14

Thanks for sharing, Kevin. Have a great day!

#15

Does this go in the Global JS or the Header JS?

#16

@CrossTown,

If you’re just using this for one header, you should be able to paste it in there and work fine. If you need this to work across multiple headers, you could place it into the global JS once and it should work for all without needing to copy and paste it into each header.

#17

we are just using one header, but it doesnt appear to be working

#18

Hi @CrossTown,

Would you mind sharing the URL of your site so we can take a look?

Thanks!

#19

www.ripplesofgrace.com

#20

Hi again,

Thank you for providing the URL, there is an error in the code that is preventing it to work, Please replace it with:

jQuery(document).on('click', '.x-menu a.x-anchor-menu-item ', function(event){
        if(jQuery(event.target).hasClass('x-anchor-sub-indicator')) {
        	event.preventDefault();
        } else {
        	var url = jQuery(this).attr('href');
        	window.location = url;
        }
});

Don’t forget to clear your browser’s cache after adding the code. Let us know how this goes!

#21

well that made the top links clickable, but now the drop downs dont drop down.

#22

Hi there,

Please replace all of that with this,

jQuery ( function($) {

$(document).on('click', '.x-nav-wrap.mobile .menu-item-has-children > a', function(e) {

e.preventDefault();

if ( e.delegateTarget === this ) {

$(this).find('.x-sub-toggle').click();

}


} );

} );

Assuming that the parent link has no link. This also prevents freezing once the click event is delegated from child to parent element.

Thanks!