Top Level Links Not Working on Mobile or iPad

Support
#1

We are developing a new site for a client. we are using Pro because it gives us more flexibility with the headers. But there seams to be a current issues with the dropdowns. You can’t select the top level navigation item. The site is here. http://conciliators.development-demo.info

On a mobile. Iphone or ipad - The header elements for the dropdown navigation will not allow the top level navigation to be clicked. If you press the word or the indicator the 2nd level of navigation opens but if you click the text again to got to the page it just closed the 2nd level down.

The navigation was from one of the templates. Would it be better to recreate it form scratch or Am I missing something in the setting.

#2

Hi,

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 in Theme Options > JS

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

Hope that helps

#3

Is this to go in the header section or the site’s theme options?

#4

Hi,

You can try adding it in Header > JS

Thanks

#5

Think thats done I will test on our other site that had the same issue - think this should be an option function.

#6

Let us know how it goes.

#7

5 sites down and all seams to be working at the moment. Case closed.

#8

Glad to hear it’s sorted.

Cheers!

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.