PRO X Theme navigation is still not working

Support
#1

Hi Guys,

I posted in this previous Forum Topic (link here), and initially this fix seemed to work on the staging. However now that the website is live, I got myself and a few family members to test it on their mobiles (all tests were on Samsung Smart Phones either GS8 or GS9) using chrome or their default browser, and all links are showing up as not clicking/linking to the next page (see video in previous post).

I have cleared the cache as is normal to do, however the problem still seems to be occurring do you have any recommendations? I can provide login details if need be.

#2

Hello @Dracostar,

Thanks for writing in! I can replicate the issue on my phone. Can you please disable your WP Fastest cache plugin so we can test your site again? It would also help if you can provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
​
To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Best Regards.

#3

Hello @Dracostar,

Please edit your header and make sure that in your navigation layered or collapsed element, the “Sub menu trigger” is set to the Sub Indicator.

Please let us know how it goes.

#4

Hi Rue,

I made the change and its somewhat fixed however it seems 2 more problems have occured.

  1. For me to access the child links under About Me in mobile you have to click it multiple times before it opens the child nav items and doesnt seem to work all the time.

  2. The buttons throughout my home pages content still dont work just like the initial problem I made mention of. This was also the case when WP Fastest Cache was on (and even while its off now)

Again thankyou in advance for your assistance so far.

#5

Hi @Dracostar,

  1. Could you try testing it again? It’s due to the size of text, icon, and mobile screen. I have fixed it by setting the margin to zero, then added this custom CSS
$el .x-anchor-sub-indicator {
  padding: 5px !important;
}

The reason for that is once the menu text became long, it covers the icon but in a transparent way. So to fix it, convert the margin to padding. This will make the icon much closer to the text but still maintaining a space (clickable space).

It wasn’t working as space around the icon aren’t clickable since it’s margin, which then also overlapped with the text. It doesn’t happen on a bigger screen, only when the text is long enough.

  1. I’m able to click and link to it on the devices I have, I checked it on mobile chrome with version 78.0.3904.96. Perhaps it’s just specific to the devices that already visited it and it’s due to WP fastest cache. Could you try it on another device while the cache is off? Then please clear browser caches, disabling the cache plugin doesn’t disable the cache already saved in the browser.

Thanks!

#6

Hi Rad,

Thank you so much for the assistance, I am going to give it a few days and re-introduce WP Fastest Cache after testing it without the system.

However is there a way I could with Z-index overlap the transparent link state over the “About Me” so it is perceived that the whole text and arrow will open the sub menu?

If this is out of scope thats ok I understand and can make do with this as it is. From a UX point of people would simply click the whole button expecting it to open a child menu is all.

Bu thank you once again!

#7

Hi @Dracostar,

Your sub-indicator is too small and hard to click on mobile. Please follow the same solution I provided here. Make sure you’re adjusting the Sub Indicator width and not the link (text) width.



Hope it helps,
Cheers!

#8

Hi @friech thank you so much, its a good start I will tweak and play with it some more to try and make it overlap the text. Thank you once again :smiley: !!!

You and the rest of the team have been awesome and trying to help me with this.

#9

Actually guys my buttons throughout my content on my website are still unclickable on my mobile phone, with or without WP Fastest cache. However could it possible be smooth scroll on mobile thats the problem? Could the scroll still be drifting on mobile hence why the buttons arent clicking?

#10

Hi @Dracostar,

I checked again and the buttons are clickable, could you try it on another device? And yes, it will not click and link if the page is still scrolling. The click events happen on specific coordinates, or are you trying to click it while scrolling? I’m not sure if it’s possible since you can only perform touch events one at a time.

Thanks!

#11

Hi @Rad, I think it might be the smooth scroll thats the problem then for me, as I have coimpletely cleared cache on my mobile and yet the buttons are still unclickable I even give smooth scroll some time to stop scrolling on its own before tapping but as soon as I do I think there is a microshift in scrolling when clicking.

#12

Hey @Dracostar,

I could replicate the issue you described on my Android phone. It’s not a problem with the menu though as I’ve tried the Navigation Layered element in my test sites and viewed them on my phone and they all work fine.

Please try testing for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.

Thanks.

Let us know how it goes!

#13

hi @christian_y I did as you said and as I suspected it is definately smooth scroll that is the culprit. I tried it on my staging.mcdzine.com website and turning off the smooth scroll feature worked for mobile. However this does affect the desktop view as its not as smooth as I would like.

So is there a way with maybe your in house knowledge of setting up a javascript function I can add globally to the whole website to turn off the smooth scroll feature on screensize = x (i.e. themeco x default tablet size media break size?)

#14

Hello @Dracostar,

What you have in mind will require you to edit the Smooth Scroll plugin. Go to Plugins > Plugin Editor > Smooth Scroll. Find the views/site/smooth-scroll.php and update the code into this:

<?php

// =============================================================================
// VIEWS/SITE/SMOOTH-SCROLL.PHP
// -----------------------------------------------------------------------------
// Plugin site output.
// =============================================================================

// =============================================================================
// TABLE OF CONTENTS
// -----------------------------------------------------------------------------
//   01. Output
// =============================================================================

// Require Options
// =============================================================================

require( TCO_SMOOTH_SCROLL_PATH . '/functions/options.php' );



// Output
// =============================================================================

?>

<script id="tco-smooth-scroll">

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

    var W = $(window).width(); 

    if ( W > 979 ) {

      $('html').addClass('tco-smooth-scroll').niceScroll({
        touchbehavior      : false,
        grabcursorenabled  : false,
        preservenativescrolling : true,
        // zindex             : 99999,
        // cursoropacitymin   : 0,
        // cursoropacitymax   : 1,
        // cursorwidth        : 10,
        // cursorcolor        : '#444',
        // cursorborder       : '0',
        // cursorborderradius : '0',
        // hidecursordelay    : 250,
        scrollspeed        : <?php echo $tco_smooth_scroll_speed; ?>,
        mousescrollstep    : <?php echo $tco_smooth_scroll_step; ?>,
      });  

    }

  });

</script>

This code will make sure that the smooth scroll will only be implemented in screens bigger than 979 pixels.

Best Regards.

#15

Hi Rue,

Thank you kindly for this I have implemented this code without issue and it seems to run fine on mobile now. I highly recommend maybe you document this code somewhere for other users who may have similair issues as a troubleshooting method, or maybe an option in the plugin as a future update to turn this feature on/off as “mobile friendly smooth scroll fix” .

#16

We certainly appreciate the feedback!

Cheers!

#17

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