Mobile responsive menu not working

• push3r

  said

  Hi Jeffw,

  I am opening this new thread so I am not hijacking the other one with similar title. I am pasting the issue I wrote in that other thread.

  Additionally, I installed Wordfence plugin to scan the website and it found some files created by the Duplicator plugin that was compromised. The Duplicator plugin was updated a while ago, but the affected files were still there but I have just removed them all. Wordfence re-scan showed that there’s no more vulnerability. And I don’t know when McAfee is going to remove the website from High Risk but for sure the website is safe. Please help me with the Mobile menu issue asap.

  Thank you.

  **************
  Hi Jeffw,

  I don’t mean to hijack this thread, but I have the same issue. Menu on mobile browsers do not work at all. I have disabled all the plugins except for the required ones as listed above.

  To elaborate, I can click the hamburger menu, the menu expands, but when I click on any of the items in the menu, it goes to some random location on the page. I am using Vellum / Report & Spa theme.

  My website is: https://www.citycoretherapy.com

  Please help.
  **************

• jeffw

  said

  Thanks for starting a fresh topic for your specific issue.

  My original reply from that other topic…

  Sorry, I cannot visit your website on my mobile devices because McAfee is telling me that your website is dangerous…

            

  Let me know when you have sorted that out and I’ll be glad to take another look.

  P.S. Instead of hijacking someone else’s thread, simply start a new topic for your specific issue. This will enable the original thread to focus on the original poster’s specific issue.

  In that other topic you replied…

  Hi Jeffw,

  There was an issue with the website a while ago of being falsely categorized as unsafe and I had done a lot to have it removed from many lists but looks like I missed McAfee. It is totally a false positive! I am using corporate web filtering service, Zscaler, and it does not show this website as unsafe. I have also scanned it with Google Safe browsing, VirusTotal, and many other scanners and they all show the website as safe.

  Please ignore McAfee which I have just submitted to have it removed from being High Risk. I have no idea when they are going to have the website re-categorized.

  I really need help with fixing this mobile menu issue.

  Thank you.

  And my reply to the above is…

  I’m sorry, as long as McAfee says your website is dangerous I’m not able to visit your website.

  Please understand, I’m just a lowly support drudge and these are my personal devices, so I’d rather not take the risk. I trust McAfee to keep my devices safe.

  Please let me know when McAfee says your site is safe and I’ll be glad to take another look.

• push3r

  said

  Hi Jeffw,

  Please check the website now. It’s changed from High Risk to Minimal.

  You can check it here. https://www.trustedsource.org/?p=mcafee

  Thank you.

• jeffw

  said

  I viewed your home page on my Samsung Galaxy tablet and on my Sony Xperia phone.

  The responsive menu works properly on my tablet, but not on my phone. On my phone, sometimes tapping a menu item scrolled to the correct position on the page, sometimes it didn’t. This suggests to me that your home page is using more resources than my phone can handle. Your phone is probably struggling to cope, like mine is.

  When I look at the browser source of your page I see your full-screen slideshow has 20 layers, only two of which appear to actually do anything visually: the layer that puts the caption on the screen, and the layer that puts the down-arrow on the screen. All of the other layers are using huge JavaScript resources but are not actually doing anything on-screen as far as I can tell.

  So I think the problem is being caused by your full-screen slideshow overusing JavaScript resources.

  To test my theory you should design a very simple slideshow for testing purposes, then switch your home page to use that test slideshow to see if the problem goes away.

  Let me know how that goes.

  Thanks.

• push3r

  said

  Hi,

  The slideshow I was using only has only 1 layer. I don’t get how you could see 20 layers from the browser source. Is it because I still have the theme’s stock demo slideshows? Should I delete them? What is the name of this slideshow that you see with 20 layers?

  So, I made a duplicate of the slideshow I was using and removed all of the unnecessary items such that there’s only 4 items within 1 layer total. But still no luck.

  To test out your theory, I went a head and created a static slideshow with just 1 layer and some text, still no luck.

  If you look at the Report and Spa theme on your mobile, the responsive menu never worked in the first place. http://demo.vellumwp.com/home-pages/one-page-resort/

  Please help. Thank you!

• jeffw

  said

  I still think the reason why your menu isn’t working on phones is because your home page is heavy with JavaScript.

  The code for home page is exactly the same, no matter what device you view it in. There isn’t special version for phones. What gets served to phones is exactly the same code that gets displayed to tablets and to desktop devices. So when I see your home page working on desktop devices and on tablets, but struggling to work on phones, this suggests to me that there is so much JavaScript executing on the page that the JavaScript that scrolls the page from the menu to the correct section is struggling to execute properly. On my Xperia phone, other elements of your home page that use JavaScript, like the accordions for example, are also struggling to execute. But maybe I’m wrong about this, I don’t know.

  Here’s something you can try as a test. Change the menu item URLs to be the full URLs. For example, instead of just…

  #treatments

  Change the URL for that menu item to…

  https://www.citycoretherapy.com/#treatments

  And do the same for all the other menu items.

  This will bypass the theme’s slow-scroll JavaScript so that tapping a menu item will jump directly to the correct section on the page in the normal HTML way.

  Let me know how that goes.

  Actually, second thoughts, don’t bother with the above test, we won’t really learn anything from it.

  P.S. Our demo site is using a very, very old version of the Vellum theme so it cannot be used to prove whether something works or not.

  P.P.S. Look in the browser source of your home page from line 170 down to about line 380 and you’ll see the layer code that Slider Revolution has added for your slideshow. Currently you’ll see that your slideshow has eight layers; when I looked yesterday your slideshow had 20 layers. But if you have switched to a simpler slideshow and you still have the same problem, then the slideshow wouldn’t appear to be the cause of your problem.

• jeffw

  said

  P.P.P.S. Oops. Forgot to mention also that I’ve started a ticket for this issue with our development team.

• push3r

  said

  Thanks! I will be waiting for a solution.

• push3r

  said

  Hi, any update on this?

• jeffw

  said

  Our development team has not got back to me yet. I’ll send them a reminder that you are still waiting.

• push3r

  said

  Anymore update? It’s been 5 days.

  Thank you.

• jeffw

  said

  Sorry, no news yet. I know we have two developers looking into this issue. Last time I asked they said they’ll release a fix as soon as they have one. I’ll send them another reminder.

• push3r

  said

  Thank you Jeffw for the update. Sorry, I didn’t mean to rush anything. I was checking to make sure the issue I have is not being brushed off and forgotten.

• jeffw

  said

  @push3r

  No worries. I’m like an elephant, I never forget.

  I have a fix for this now.

  Open the ‘assets/js/onLoad.js‘ file and on line 897 or thereabouts you’ll see the following line of code…

  deviceBind = 'click mouseup touchstart';

  Change it to this…

  deviceBind = 'click mouseup touchend';

  Save and upload.

  After uploading the modified file remember to clear your browser’s caches so that it is not using old, cached versions of the theme’s JavaScript files…
       → http://www.refreshyourcache.com/en/cache/

  Thanks for being so patient. It took a while to resolve this issue because the inconsistent behaviour made it tough to trace the cause and test possible fixes.

  We’ve already made this change to the development version of the theme so that it will be included in the next theme update.

• push3r

  said

  Thank you Jeffw and the developers!

  Wow! Finally it’s working as expected! I will sure update the theme when it becomes available.