Top level links with sub menu not clickable on touch device

[Dagaloni]

I know, there have been several posts about this issue but I could not find a solution. Just in case the problem isn’t clear: when you have an inline navigation with top-links containing sub-links, the top-links isn’t clickable as a link that redirects on a touch device. Instead, it opens the sub-menu.

I did find this code from 2018 which does not seem to work anymore (at least for me)

jQuery ( function($) {

$('.x-menu-dropdown .menu-item-has-children > .x-anchor').on('mousedown 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');
}
  });
  
});

Could someone assist me with this problem? The website is https://blendit.nu

Many thanks!

[friech]

Hi @Dagaloni,

Thank you for writing in, The problem here is the Inline Navigation automatically sets the Anchor as the “Sub Menu Trigger” that is why when you tap the top links it’s open the sub-menu and can’t navigate to their respective pages, on other navigation elements there is the Sub Menu Trigger option where you can choose if the trigger is the entire anchor or just the Sub Indicator (chevron icon). Unfortunately, the Inline Navigation element does not have this option.

What you can do here is using different navigation (Layered or Collapse) navigation for the tablet. Or make your top links solely as the menu-trigger (no link) and have everything in the sub links.

Cheers!

[Dagaloni]

Alright! Thanks for the quick reply Friech! I hope this feature will be added soon

I did indeed go for the “put everything under sub links” approach. However I tweaked it a little. I have my collapsed menu set for <980px and I wanted to only show to extra links on a touch-device. I ended up using this css code while adding the class .touch-only-menu to the menu items under appearances > menu. Hope this helps anyone in the future.

@media only screen and (min-width: 980px) {
  .touch-only-menu {
    display: none;
  }
}

@media (pointer:coarse) {
  .touch-only-menu {
    display: block;
  }

[tristup]

Hi @Dagaloni,

Glad that you are able to find the solution and thanks for sharing it.