Docs

[Michael P]

Hi,

Strange problem when viewing the site on mobile. The navbar menu links don’t work as they should on my touch device, which is an iPad Pro.

http://www.wiperstimesplay.co.uk

When the site is first loaded, the menu works fine. But then after touch-scrolling down the page (i.e without using the menu) the links become unresponsive. The site has to be reloaded in order for the menu to come back to life.

Looks like a bug – any idea how to fix? Looks like this thread might contain something relevant:

Mobile onepage navigation bar – issues with link hit recognition

Many thanks.

[Rad]

Hi there,

Thanks for writing in.

It’s blocked by touch events, you have to turn it off by adding the code mentioned in that thread 🙂

Or try this to make sure it’s turned off after instead of before the event is loaded.

jQuery ( document ).ready ( function($) {

setTimeout( function() { $('.x-navbar .x-nav-wrap.mobile a').off('touchstart touchend'); }, 2000 );

} );

Thanks!

[Michael P]

Hi,

Thanks for your help with this.

I added the following line from the other thread, in the customiser under custom javascript:

$('.x-navbar .x-nav-wrap.mobile a').off('touchstart');

Is that correct? I think that’s what you intended, but I can’t test it at the moment, so I’d be grateful for your confirmation.

[Rahul]

Hey There,

Thanks for writing back!

Kindly change the above code to the given one.

Let us know how it goes with you.

[Michael P]

Hi,

The code provided did work in the sense that the unresponsive links issue was resolved. However, the code introduced jumpy behaviour – when using the menu links to scroll to the desired section, the action is not smooth.

I found this code in another thread, but not sure if this is intended for the same issue?

jQuery(function($){
  $('.x-navbar .x-nav-wrap.mobile a').off('touchstart');
  $('.x-navbar .x-nav-wrap.mobile a').on( 'touchend', function(){
    
   scroll_to_this_section ( $(this).attr('href'), true );
    
  });

  $( document ).ready ( function() {

    scroll_to_this_section ( window.location.hash == '' ? 'body' : '#'+window.location.href.split("#").slice(-1)[0], false );    

  } );

  function scroll_to_this_section ( hash, mobile ) {
    
    if ( mobile === true ) {
        $('.x-btn-navbar').trigger('click');
    }

    setTimeout ( function() {
          $('html, body').stop().animate({
             scrollTop: $( hash ).offset().top - ( $('.x-navbar').height() + $('#wpadminbar').height() )
          }, 850, 'easeInOutExpo');
    }, 300 );

  }

});

[Lely]

Hi There,

Yes, the code is for mobile too. The animate function will give smooth scrolling.
Do let us know how this goes.

[Michael P]

I applied the code above in Cornerstone > Settings > Custom JS.

It partially works. Touch navigation always works initially, but after touch-scrolling around the page without using the menu, eventually the links become unresponsive once again.

Then something will bring them back to life – I’m not sure exactly what action achieves this, but it seems scrolling around or clicking the footer links sometimes works to make them responsive again. A page refresh, of course, brings them back to life.

But it’s not a completely successful solution – btw I’m testing this with an iPad Pro.

[Rad]

Hi there,

Would you mind providing a video recording? For the meantime, please replace this

  $('.x-navbar .x-nav-wrap.mobile a').off('touchstart');
  $('.x-navbar .x-nav-wrap.mobile a').on( 'touchend', function(){

with this

  $('.x-navbar .x-nav-wrap.mobile a').off('touchstart touchend click');
  $('.x-navbar .x-nav-wrap.mobile a').on( 'click', function(){

Thanks!

[Michael P]

Hi,

Unfortunately the new code doesn’t resolve the issue. As requested, copied below is a screen recording of my iPad. Keep your eyes on the menu items, and watch how they become unresponsive:

https://gattacahq.wistia.com/medias/h2clnu1z2r

[Rad]

Hi there,

I can replicate it now, but the weird part is it only happens on the top area (rev slider and THE SHOW (slider too)). Try manually scrolling it down and pass THE SHOW section, then manually click the navigation again and it will start working again. Something is disabling the scroll effect on that top area and it can be done only with javascript too. Would you mind removing the rev slider and THE SHOW sections temporarily and try it again.

Thanks!

[Michael P]

Hi Rad,

Unfortunately now the site is live, I can’t remove those areas. I could perhaps duplicate the page to create a testing area for this?

Could the problem be related to the custom CSS applied to the mobile navbar button? I can’t see how this would affect it but please check my CSS to see if it’s correct:

/*MOBILE NAVBAR*/
.x-navbar .mobile .x-nav li>a {
    border-color: #ccaa00;
}

a.x-btn-navbar.collapsed {
  background-color: transparent;
  box-shadow: none;
  color: #202020;
}

a.x-btn-navbar {
  background-color: transparent !important;
  text-shadow: none;
  box-shadow: none;
  color: #202020;
}

a.x-btn-navbar.collapsed:hover {
    background-color: transparent !important;
    box-shadow: none;
}

[Michael P]

Hi again,

I updated the mobile button custom CSS to some other code recommended in another thread, but it didn’t help:

/*MOBILE NAVBAR*/
.x-navbar .mobile .x-nav li>a {
    border-color: #ccaa00;
}

.x-btn-navbar, .x-btn-navbar:hover, .x-btn-navbar.collapsed {
  background-color: transparent !important;
  border: none;
  box-shadow: none;
  text-shadow: none;
  color: #333333;
}

.x-btn-navbar.collapsed:hover {
    background-color: transparent !important;
    box-shadow: none;
}

[Joao]

Hi There,

You could try to duplicate the page as you mentioned above for testing purposes and see how it goes.

If that does not work please provide your admin credentials so we can take a closer look.

Thanks

[Author]

Posts