Menu Items with Sub-items not working on Mobile

[rlmills3rd]

Hello:

I am having a problem on mobile devices where any menu items that have the down arrows for submenu items will not expand. This issue is only happening on mobile devices.

[ruenel]

Hi There,

Thanks for writing in! You are using an older version of theme which may have some bugs in it. Could you please update to the latest versions?
Our latest versions are:
- X theme 6.1.6
- Cornerstone 3.1.6

This latest release contains fixes for several issues so be sure to check out the changelog (http://theme.co/changelog/).

_After doing the updates, always remember to clear all caches (if you are using WP Rocket, WP SuperCache or W3 Total Cache) when updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.-

Please let us know how it goes.

[rlmills3rd]

I have updated and purged cache per your suggestion. The issues still persists. On mobile any menu item with a sub-menu item does not expand when clicked.

[ruenel]

Hello There,

The submenu is not working in smaller screens because of this custom JS code:

/*Expand Moble Submenus on Parent Menu Item Click*/
jQuery(document).ready(function($) {
   var subMenuLink = $('.x-navbar .mobile .x-nav li.menu-item-has-children > a');
 
   subMenuLink.on('click touchstart', function(e) {
     e.preventDefault();
     var $this = $(this);
     $this.find('.x-sub-toggle').off('click touchstart');
     $this.closest('li.menu-item-has-children').toggleClass('x-active');
     $this.siblings('.sub-menu').slideToggle(300);
   });
});

Please remove this code, clear the caches and test your site again.

[rlmills3rd]

I’ve removed the JS code for now but the reason it was done in the first place was so that when navigating the mobile menu the submenu items expanded when the entire parent item was clicked and not just when the user clicks on the tiny down arrow to the right. Is there a way to bring back this functionality with an updated version of the JS code above? Thank you.

[nico]

Hi @rlmills3rd,

As of now, I could not be able to replicate what you want to achieve because I am a little confuse of what you want to achieve. Would you mind sharing us a sample site that we could follow.

Please share us also your admin credentials so we could directly add the script and test if it will also work on your setup.

Don’t forget to set it in a secure note.

Thank you so much.

[rlmills3rd]

Currently you can only expand the menu clicking here :

Whereas i would like users to have the ability to expand the parent menu item by clicking here:

The previous code (which was given to me by your support team) achieved my goal of having the submenu expand open when clicking the text of the parent menu item as well as the down arrow to right.

[rad]

Hi @rlmills3rd,

Please remove that script and just add this CSS to your global custom CSS.

#x-nav-wrap-mobile .x-sub-toggle {
    width: 100%;
    text-align: right;
    z-index: 999999;
}

Hope this helps

[rlmills3rd]

That seems to have done the trick! Thanks!

[Prasant]

You are most welcome.