X: Open Subenu by clicking on the title (mobile)

[ULinn]

In a 2015 post, a support member gave this solution to make not only the arrows toggle the submenu:

2: Open the submenu items when clicking the whole parent link and not just the arrows. To achieve it, add following JS code under Custom > JavaScript in the Customizer:

// Expand Submenus on Parent Menu Click (for mobiles)
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);
   });
});

I just tried the code, but it doesn’t work witho today’s X theme. After adding the code, neither the title nor the arrows let the subenu appear …

Can you provide an update to that code?

Thank you!

Uli

[christian]

Hey Uli,

Please remove it and try this simple CSS alternative (add the code in Theme Options > CSS)

.x-sub-toggle {
    width: 100%;
    text-align: right;
}

.x-sub-toggle>span {
    padding-right: 10px;
}

Tested that in all Stacks and it works. See https://youtu.be/_H64XSIs8ek

I would want to add though that we could not continue on supporting or fix custom codes even if you got it from this forum. The thing is, they are not maintainable. As you can see it does not work anymore. They only serve as a guide to help you get started.

This feature is readily available in the Navigation Inline element by the way. You can add the element to the header if you are using Pro so I’d recommend you upgrade.

If you wish to stay with X, you would need to consult with a third party developer to maintain the code I’ve given.

Thank you for understanding.

[ULinn]

Hi Christian,

thank you for your help - now it works as expected. Great!!!

I understand, that you can not support custom code, but I would’nt call this “custom code”. I only want to have the same behaviour in the desktop AND the mobile view. In the desktop view, I can click on the title to open the submenu, in the mobile view I cant (without your css). So I’d call this a bug or a missing feature and not “custom code”.

But anyway - thank you again for your help, for now it works.

I’ll think about upgrading to PRO. Can I be sure that everything will still work as befor after the upgrade? All the E&P forms, “The Grid” and “Essential Grid” and so on?

Best regards

Uli

[christian]

Hey Uli,

To clarify, this is not a bug nor a missing feature. The Submenu opens in desktop when you hover over a Parent menu. Not click (if it opens on click on your end, you might have another custom code that does that). Now in mobile, that hover state is non-existent. You can now only tap. That is why the behavior is different. It’s the theme’s design for the differences in desktop and mobile devices. This is not an issue with the theme.

Upgrading to Pro will make no difference with regards to the third party plugins. You will just have to create a new custom header and there’s just no Stack demos which is not a problem if you have already built your site.

Thanks.

[ULinn]

Thank you for your infos concerning pro! I’ll discuss this!

[christian]

You’re welcome, Uli.