Menu opening on mobile and CLS Performance hit

Also have problem with main navigation menu mobile devices and Twenty Seventeen v3.5 so I’m adding my report here instead of starting a new thread

On desktop version everything works fine, menu also changes to mobile icon without problem, but then… I can’t click on it. Running website on mobiles have same results. Main menu icon is displayed but I can click/unwind it.

I downgrade theme to 3.3 and everything works flawless.

Same problem on Twenty Sixteen v3.1, and downgrade to 3.0 do the trick.

If authors need more info, or see problem on working www. please drop a line. WP in multisite mode.

• This reply was modified 9 months, 1 week ago by motkar.

Just to clarify my issue w/ reference to motkar’s post – on my site the menu works correctly, staying closed, on a desktop browser when the window is narrowed to mobile-style. Opening/closing by itself only happens on a mobile device.

Hey @justinhill001!

Have you tested if this happens on a different page of your site? This is not the default behavior, and it may be triggered by a plugin. I would recommend testing this with the health check plugin.

If you can install plugins, install and activate Health Check. It will add some additional features under the menu item under Tools > Site Health.

On its troubleshooting tab, you can Enable Troubleshooting Mode. This will disable all plugins, switch to a standard WordPress theme (if available), allow you to turn your plugins on and off and switch between themes, without affecting normal visitors to your site. This allows you to test for various compatibility issues.

There’s a more detailed description about how to use the Health Check plugin and its Troubleshooting Mode at https://make.www.ads-software.com/support/handbook/appendix/troubleshooting-using-the-health-check/

Thanks, @properlypurple! Just one thing – the issue only presents on a mobile phone. Even with this troubleshooting mode enabled, won’t the mobile still load the live site?

To answer your question, it does it on all pages.

To test on an actual mobile device, you’d have to open wp-admin in your mobile browser, and run the troubleshooting there to actually find out what might be causing this.

To start, the usual culprits for such issues are optimization and performance plugins, or plugins that concatenate css/js files, and/or enable usage of a CDN of some kind.

OK – do I need to actually set up the troubleshooting mode on the browser, or can I set it up on the desktop and then login to wp-admin on the phone?

Your list of “usual culprits” is interesting. I use Rapidload, which does all those things…

Thanks again for your advice!

Hi @justinhill001 – if you’ve set up troubleshooting mode while on the desktop – I’d expect it to still be active when you log into wp-admin on the mobile.

Thanks for your assistance. I’ll try and dig into this in the next day or so. That said, I might try deactivating Rapidload first (either completely or disabling sections of it) to rule it in or out.

Update: I’m grateful to @properlypurple for introducing me to the Health Check plugin. Unfortunately, @jordesign, it seems that even if troubleshooting mode is enabled on the desktop, it isn’t when logging in from a mobile. So, I have to enter troubleshooting mode from the mobile itself, which is pretty frustrating going back and forth turning plugins on and off.

Frustratingly, I discovered in the course of all this that my menu opening problem doesn’t happen ANYWAY if I’m logged in. To be clear, if I browse the site while logged in on the phone, the menus load closed. If I log out, the menus load open.

So I installed the User Switching plugin. And:

In troubleshooting mode, with all plugins (except user switching) disabled, it looks like the menus are loading open when logged out via user switching. But this is really tricky to confirm; when I click a link is the phone loading the troubleshooting version of that page, or the live one? It’s very hard to tell.

But if this is true then the only remaining variable is the theme itself, and the possibility that it’s corrupt in some way. What would be the procedure to re-install the theme? Switch to another theme, delete twenty-seventeen, re-download twenty-seventeen, switch back to it? Losing all the theme customisation?

Oh, one other thing – just to prove I’m not imagining all this. If you run Google PageSpeed Insights, it shows little pictures of the site as it was loading. The menu is open in these images.

What’s that line from Jurassic Park?

@justinhill001 … Try to downgrade theme to 3.3 version.

• Download 3.3 with svn (client)
• upload it on serwer to themes directory under another name e.g. aaa
• then under ftp switch themes dir names, change twen..7teen (v3.5) name to eg. temp and uploaded aaa (with v3.3) to twen..7teen
• clear cache in browser and WP if you ar? using any plugin for it
• check if that’s works

Feels like there is a bug in main menu jQ in latest version so i my isue in your thread. I also nade all test, and eliminator plugin problem…

Just wonder did anyone above is using 2017 theme, test how latest release works on mobile? Or just like to give good advices?

• This reply was modified 9 months, 1 week ago by motkar.
• This reply was modified 9 months, 1 week ago by motkar.
• This reply was modified 9 months, 1 week ago by motkar.

@motkar, thanks for your advice. I’m afraid I don’t understand it…

give me a sec. Need to switch to PC couse my non english mobile change every word in post.

It seems there’s a plugin called WP Rollback that will allow me to roll the theme back to a previous release. I’m going to try that tomorrow (after backing up!)

@justinhill001 …

I have a similar problem and after checking all other possibilities, I also came to the conclusion that the problem lies somewhere in the new theme release (probably the jQuery script responsible for the main navigation menu). This was confirmed when I replaced the latest version of twentyseventeen (3.5) with the older one (3.3).

To do this confidently, efficiently and without interruption in the operation of the website, you can:
1) download old version of twentyseventeen,
a) 3.3 works great for me ,
b) I grab it from https://themes.svn.www.ads-software.com/twentyseventeen/
c) to get wole directry under windows you need SVN client like tortoise SVN
2) to avoid identical names and complications when overwriting files on the computer, I temporarily change the name of the downloaded directory to the example “aaa”
3) I upload the “aaa” directory with the the WP themes folder “/wp-content/themes” on serwer,
a) after that I have there “twentyseventeen” directory with 3.5 version and “aaa” with 3.3 version;
4) and now I want to switch them on WP, so under FTP client I need to…
a) rename “twentyseventeen” to “whatever” (this way WP loose control over under 3.5 version of theme)
b) and rename uploaded “aaa” to “twentyseventeen” (this way I replace previously lost 3.5 with older 3.3 version)
c) if you make change names in poin 4 fast enough, none of the website visitors will even realize that you have done anything, and WP does not report any problem with such a change
5) now all you need to do is: clear cache, refresh the page, and if your ploblem cause latest theme version, it should be gone :]
6) BTW; turn off theme autoupdate function in WP, and do NOT update it manually till next version, couse you will once more at start point.

Regards.

edit:
WP Rollback, could be good idea but I didn’t use it soI cant confirm how this will end. Im used to terminal commands, and not a fan of plugins experiments – it has a name, I suspect accurate is… to being an old dude :/

Nevertheless, I keep my fingers crossed that hope everything goes smoothly and ends positively. Cheers

• This reply was modified 9 months, 1 week ago by motkar.
• This reply was modified 9 months, 1 week ago by motkar.

WP Rollback works as expected, and rolled twenty seventeen back to 3.3 seamlessly, in a couple of clicks.

That’s the good news. The bad news is that this didn’t fix my menu problem. Yet.

I am going through endless hoops dealing with caching and CDN but can now 99% confirm it’s RapidLoad that is messing up the menus on mobile devices. Rolling back to 3.3 was a red herring.

RapidLoad allows me to exclude specific CSS/JS from optimisation. I’ve already had to do this to get Google Site Kit working right. Turning off JS optimisation fixes the menu problem.

Can anyone advise what JS I should add to the RapidLoad exclude list to protect the menu stuff in twenty seventeen?

Specifically, it is the “delay javascript: load JS files on user interaction” option that breaks the menu.

• This reply was modified 9 months, 1 week ago by justinhill001.
• This reply was modified 9 months, 1 week ago by justinhill001.
• This reply was modified 9 months, 1 week ago by justinhill001.
• This reply was modified 9 months, 1 week ago by justinhill001.