Mobile menu not working on shop pages

Support
#1

Hi
I’m using X theme with the Ethos Stack, and for some reason the mobile navigation doesn’t work on any of the Shop pages. When I touch a menu item, the menu closes up and doesn’t take me to the relevant page.
The menu works OK on desktop.
URL is http://flowfit.co.uk/flowshop
Thanks in advance,
Barney

#2

Hello There,

Thanks for writing in! I have inspected the page and it seems that there is a JS error. Please have it updated and make use of this code instead:

jQuery(function($) {
  $('.x-feature-box-text a:last-child').each(function() {
    $(this).closest('.x-feature-box').find('.x-feature-box-graphic-inner').wrap('<a href="' + $(this).attr('href') + '"></a>');
    $(this).remove();
  });
  
  $('.x-nav-wrap.mobile > .x-nav > li > a').off('touchstart touchend click');

  $('.x-nav-wrap.mobile > .x-nav > li > a').on( "click", function(e) {
      e.preventDefault();
      e.stopPropagation();
      $('.x-btn-navbar').click();
      $section = $(this).attr('href').split("#").slice(-1)[0];
      if ( $section || $section != '' ) {
        $('html,body').stop().animate({
          scrollTop: $('#' + $section ).offset().top - 397        
        },700 ,'swing');
      }      
  });

});

We would loved to know if this has work for you. Thank you.

#3

Thanks for responding.
This hasn’t resolved the problem. The same issue is still there.

#4

Hello There,

Thanks for updating in! If that is the case, have it updated again and use only this:

jQuery(function($) {
  $('.x-feature-box-text a:last-child').each(function() {
    $(this).closest('.x-feature-box').find('.x-feature-box-graphic-inner').wrap('<a href="' + $(this).attr('href') + '"></a>');
    $(this).remove();
  });
});

We would loved to know if this has work for you. Thank you.

#5

Thanks! This worked!

#6

You are most welcome. :slight_smile: