Hamburger Menu - Parent categories not clickable

[kylix]

Hello,

I’ve combed through the forum and found people with a similar issue, but none of the explanations are working for me. If a user visits my website on a mobile phone and clicks on a top name on the menu, it doesn’t open up to the sub-menu. The user has to click on the arrow next to the name on the menu. Here is a link to the site - https://thespiritualfixer.com/

Any help is greatly appreciated.

[friech]

Hi Kylix,

Thank you for writing in, first, please update your X theme to the latest version 7.2.3 to make sure it’s compatible with your Cornerstone 4.2.3.

How to Update

Then I saw the JS code that you’re trying to use to make this work, and there is a typo error on it. It says Query instead of jQuery

Hope it helps,
Cheers!

[kylix]

Hi Friech,

Thanks for answering my question.
I was able to update the X theme and it is compatible with cornerstone 4.2.3.

Also, I was able to change the typo error for the JS code. Unfortunately, the Parent header on the menu is still not clickable. Anything else I can do to make this work?

[christopher]

Hi @kylix,

The behavior is the default behavior of the theme which clicking the text will go to the parent page and clicking the arrow will open up the sub-menu.

I tried to find a solution for you but it seems that you added some kind of Javascript code that prevents my work.

I want to have a clean slate without any customization to help you out. I wonder if this code will work after you clean up other Javascript code:

jQuery('.x-navbar .mobile .x-nav li.menu-item-has-children > a').on('click', function() {
    jQuery(this).find('.x-sub-toggle').triggerHandler('click');
});

kindly get back to us with the result of the steps above and URL/User/Pass of your WordPress dashboard using the Secure Note functionality of the post to follow up the case if you still have problems.

Thank you.

[jade]

Hey @kylix,

Please try this code in X > Theme Options > CSS:

.mobile .x-nav .x-sub-toggle {
    width: 100%;
    text-align: right;
    margin-right: 20px;
}

Hope this helps.