With the update to WP 6.7, in mobile screen sizes, the WP native hamburger menu and image click-to-enlarge no longer function.
What steps have you taken to resolve the issue?
2024 theme
deactived plugins
cleared all caches
tried both logged in and logged out
tchrome and firefox
With Rocket Loader enabled in WP 6.6, speed scores were great.
Now, with Rocket Loader disabled in order to get mobile menu and click-to-enlarge functioning, speed scores have dropped, especially in mobile.
I don’t want to sacrifice the speed Rocket Loader provided, but I need mobile to function.
As there’s no way on the free plan to contact CF to let them know there is a conflict between Rocket Loader in WP6.7, I’m just letting you guys know that there is an issue. Any suggestions towards resolving this on the site are appreciated.
Haven’t yet upgraded to 6.7, however you can always troubleshoot by looking at the Developer Tools (F12) of your Web browser and navigate to the Console for errors, otherwise catch with Network tab and filter out those JavaScript .js resources.
However, if they’re loaded from WordPress, I doubt they’re in conflict, could be I am wrong, but wasn’t the case up for now for my approx. ~ 80 WP Websites I manage over Cloudflare.
Nevertheless, if it’s a theme calling, then ye, might be worth contacting theme devloper or hire some web developer do find this script for you and modify it by adding an data-cfasync="false" atribute to the particular script resources to make Rocket Loader ignore them as follows:
We all do learn quite “unusual stuff” which we don’t know from time to time. Don’t be afraid!
I’d suggest you to temporary Disable the Rocket Loader at Cloudflare dashboard until you figure out what works the best for you in the long term.
May I ask if it does affect on the Whole website or some particular pages such as blog posts?
And what particularly doesn’t work on mobile?
Android or iOS?
I’d say your hamburger menu isn’t alligned well, not because of Rocket Loader, rather flexbox and CSS, neither inside the correct div tag to be next to the search input field:
Menu does behave strange, on click it opens “modal” which shouldn’t by default be used for navigation menu at all.
You’d have to make sure that the “modal” block for menu doesn’t have the option to “touch” or “click” somewhere or “esc key” pressed to close it.
By default behaviour, modal closes using the above methods when the events are “fired” and triggered, which somehow is “stuck” and then next time when you click the “hamburger” menu, it doesn’t work:
I am afraid this is the theme and codding issue as far more I go checking things at first sight, despite it’s behaving as it should, just not correct method and elements used for particular things.
Regarding the note about “modal” for the menu/navigation, see more information when and where to use it:
Temporary remove the particular image “atomic-3” from the content from my above reply. Save and publish. Then refresh and see if any other “click-to-enlarge” images works as expected.
Thanks, but that’s over my head. I am just trying to figure out why some of the functionality that was working last night before I updated to WP 6.7 is now no longer working.
The only thing that gets the functionality working (menu, click to enlarge) is disabling Rocket Loader, either directly or by pausing CF as you suggested.
What I meant is that I still can’t open the hamburger menu or click-to-enlarge as long as Rocket Loader is enabled.
The menu problem that you show is fixed was not an issue before 6.7. The menu opened fine, was entirely readable and clickable, in mobile. Whatever the problems is with the CSS, wasn’t an issue untill 6.7.
I’m making no progress, yet…
A reply in a thread from a few years ago in this forum advises not to use Rocket Loader.
In a previous thread in which I asked about Rocket Loader causing some loss of functionality in mobile, I was given a tutorial in css that while appreciated, wasn’t addressing the immediate issue, so I bailed on the thread. Since then, someone replied to the thread, “you can disable Rocket Loader for mobile devices by using Cloudflare Page Rules.” The thread had closed before I saw the reply, so I couldn’t ask him for details on how to do that, so I am coming back to this.
If it is relevant, the site is using a light WP 2024 child theme, with no separate mobile theme. Please, no css tutorials; I know there are problems with the css, but I will deal with those later ex Cloudflare…
In the Page Rule Settings, selecting Rocket Loader offers the following Setting options:
Cache
Disable Apps
Disable Performance
Disable Security
Disable Zaraz
Edge Cache TTL
Email Obfuscation
Forwarding URL
IP Geolocation Header
Opportunistic Encryption
Origin Cache Control
SSL
Selecting one of these options doesn’t provide additional options that might pertain to mobile. There are no options for Device or Screen Rez that would disable Rocket Loader on mobile.
