Navigation Collapsed Sub-Menu not openable with touch devices

[dmconsulting]

Hello, this is my second time posting about this.

On mobile collapsed menu’s i cannot click a link which has a sub-menu attached to it.

if i use browser web-tools to simulate smartphone versions, the only way to click anchor and see the sub-menu is by disabling touch functionality.

So on an actual smartphone, clicking either the sub-menu parent link “anchor” or the “indicator”, opens the parent link page.

Here are my settings:

Hope you can help.

[dmconsulting]

I’ve made a small video that shows what happens when touch simulation is used (indicator acts as link) and when mouse clicks are used (anchor and indicator act differently).

You can see the video here if you want:

[tristup]

Hi Brigham,

Thanks for reaching out.
I have checked your website and Navigation Collapsed settings and found everything is working fine in mobile, while clicked into the indicator. It will open the submenu while clicking on the down arrow.

I would suggest you check once by clearing all types of cache and in incognito/private mode of the browser.

Thanks

[dmconsulting]

Hi @tristup,

Thank you. this thing is puzzling me.
I have cleared caches and used incognito modes.

i have a cloned site that has exactly the same settings for the menu, the one i showed you works, while the other does not.

The only difference between them is that on the production server i have more plugins active. Maybe some plugin used in the live site causes this behaviour.

The strange thing is that the parent menu which has the sub-menu indicator is entirely enveloped in an html A tag, how does the browser “know” where i am clicking if both elements are inside a link tag?

The funcionality of these collapsed menus with offcanvas is throwing me off.

site in development works

https://snala.basexpro.kodeserver.net/servizi/

live site that does not work

Servizi | SNALA CISAL

I will try to deactivate/activate some plugins in both sites in order to isolate the issue, and then i will let you know.

Do you have any other ideas?

Thanks for the help,

[dmconsulting]

I noticed that on the main site there is a console error related to the script that “governs” this functionality:

Not working script on page:

<script id="x-header-custom-scripts" type="text/javascript">jQuery ( function($) {

$('.x-menu-collapsed .menu-item-has-children &gt; .x-anchor').on('mousdown touchend', function(e) {
if ( (!$(e.srcElement).is('.x-anchor-sub-indicator')) &amp;&amp; (!$(e.srcElement).is('.x-anchor-content')) ) {
  var $this = $(this);
  $this.siblings('ul').hide();
  window.location = $(this).attr('href');
} });});</script>

Working code:

<script id="x-header-custom-scripts" type="text/javascript">jQuery ( function($) {

$('.x-menu-collapsed .menu-item-has-children > .x-anchor').on('mousdown touchend', function(e) {
if ( (!$(e.srcElement).is('.x-anchor-sub-indicator')) && (!$(e.srcElement).is('.x-anchor-content')) ) {
  var $this = $(this);
  $this.siblings('ul').hide();
  window.location = $(this).attr('href');
}});});</script>

notice amp;& instead of && ?

WHat could be the cause?

[dmconsulting]

Update,

i had inserted that JScript some time ago (many versions ago of PRO) and now i cancelled the code and everything seems to be working.

[friech]

I see, glad you find the issue and sorted things out.

Cheers!