Top Level Links Not Working on Mobile

[PremierWeb]

This is causing non-stop issues with our designs, constantly having to rethink ways to build mobile menus. It’s extremely normal practice to have the arrow open sub menu items while clicking on the top link directly would take you to the page itself. I get that someone there thinks this is a poor user experience as someone may fat finger the arrow but it’s a MUCH poorer experience to have to go to a totally separate menu item to find sub menu items that are related to and SHOULD be under the correct top link item. Please fix this as it’s driving myself and my clients nuts and creates a terrible end user experience with mobile navigation.

I tried the jquery addition I found in the forums but it doesn’t seem to make top links work. How soon can we expect this fixed? We buy a lot of licenses and I’d hate for this to be the reason we have to bail on theme.co.

[alexander]

Hi @Speshled,

Thanks for reaching out and sharing your feedback. This is something we’ve seen a fair amount of feedback on and we have an active feature request open to making this an official feature for collapse navigation. As a workaround, try adding this custom javascript:

jQuery(function($){
  $('.x-menu-collapsed .menu-item-has-children > .x-anchor').on('mousedown touch', function(e) {
    if ( ! $(e.srcElement).is('.x-anchor-sub-indicator') ) {
      var $this = $(this);
      $this.siblings('ul').hide();
      window.location = $(this).attr('href');
    }
  });
});

Effectively this will make the anchor work again, and when it’s touched/clicked it will prevent the sub menu from opening while the navigation starts to happen. The sub indicator (arrow) can still be used to toggle the collapsing.

[PremierWeb]

I’ve tried this but it disables the sub indicator from working as well. The site I’m working on is test.redstarvapor.com.

This feature needs to get bumped to the top of the list as I consider this more of a break then a feature request.

[nabeel]

Hi again,

I checked your site and everything seems to be working fine now. Did you clear the cache after adding the code? The sub menu opens when you click on the down arrow icon and clicking the parent menu item opens the link. However you can add the following code as an alternative workaround but please note that this will also open the sub menu on parent menu item click.

jQuery(document).ready(function($){
    $('.x-off-canvas .x-anchor-menu-item .x-anchor-text').on('touchend click', function(e) {
        var link = $(this).parents('.x-anchor-menu-item').attr('href');
        window.location.href = link;
    });
});

Let us know how this goes!

[PremierWeb]

It works on desktop when shrinking the window to show the collapsed navigation or through using chrome’s browser tools to inspect mimicking an iPhone, but this doesn’t actually work on an iPhone on any browser.

[rad]

Hi there,

Some users want the parent menu item to toggle the menu, and some wishes to link it instead like from here. So yes, there should be an option for each user preference instead of implementing as a permanent feature.

Could you try this one?

jQuery ( function($) {

$(document).on('touchend click', '.x-off-canvas .menu-item-has-children .x-anchor-menu-item', function(e) {

e.preventDefault();

if ( e.delegateTarget === this ) {

$(this).siblings('ul').hide();
window.location.href = $(this).attr('href');

}


} );

} );

Thanks!

[PremierWeb]

Hello,

That new code completely disables both the top menu link and drop down functionality, essentially killing the menu item altogether. I love what the first code did but unfortunately it doesn’t ACTUALLY work on mobile phones. It only works in browsers mimicking a mobile device. Is there anything that can be done to make this work on mobile?

[rad]

Hi there,

In that case, please provide your login credentials in a secure note. I can’t fully test it if the older code is still there, with the login I can remove and add a different variation of the code while testing.

Thanks!

[PremierWeb]

Thank’s I’ve added the info above.

[christopher]

Hi there,

I spent some time troubleshooting to code using my iPhone SE. I found out that the element target is not always triggering the correct selected tag in iPhone.

I tried to Narrow down the problem and added an extra condition, so the code that I added to your website is now this:

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');
    }
  });
  
});

The code is not perfect at all, you will need to touch the very beginning of the menu item title to make it go to the page if you touch on the middle of the title it will still show the submenu. Unfortunately, I could not find any better solution at the moment.

This matter should be fixed in upcoming major releases so kindly stay tuned for those releases. Thank you for your patience and understanding.