Header menu will cache on desktop but not in mobile. Configuration has been set to Respect Existing Headers but problem still exist

I have my Cache-Control max-age set to 300 and tried deactivating my plugins and reactivating one by one but still having an issue. Menu will udpate on desktop but not mobile.

May I ask if you’re using a responsive Website, or rather a sub-domain for “mobile users”? :thinking:

Furthermore, a same file (CSS) is being used?
How about manipulation, does it executed via the JS code or?

Have you tried Purging the single file instead via CF dashboard? :thinking:

Could be a cache in a Web browser on your phone. Have you tried clearing your Web browser cache on a mobile phone? How about using a Private window (Incognito mode)?

Furthermore, you could determine if this behaviour continues even by using a “Pause” option at Cloudflare as follows:

  1. Use the “Pause Cloudflare on Site” option from the Overview tab for your domain at dash.cloudflare.com .
  2. The link is in the lower right corner of that page.
  3. Give it five minutes to take effect, then make sure site is working as expected with HTTPS.

Other helpful articles:

It is a responsive WordPress site. It was created with the Elementor plugin.

Let’s double-check some things since Elementor might have a conflict with Cloudflare settings.

May I ask what kind of option have you got selected from the dropdown menu for the “Browser Cache TTL” option at Cloudflare dashboard → Caching → Configuration? :thinking:
Try setting it to “Respect Existing Headers”, therefore use the button which says “Purge Everything”.
Also, try opening your Website in a different Web browser, or delete cache from your current one to see if there’s any difference at all.

Have you got Rocket Loader enabled at Cloudflare “Speed → Optimization”?
Maybe this Page Rules for Cloudflare as described here can help you:

Those instructions only specify the match, but not the needed action. They probably want that Page Rule to disable Rocket Loader for the matching URLs if so.

Browser Cache TTL is set on “Respect Existing Headers” as mentioned in my initial help ticket.

I have “Purge Everything” as requested. I am in incognito mode now, but the same result in mobile. It updates fine on desktop.

Rocket Loader is not active.

Thank you for feedback information.

Did you already wrote to the Cloudflare Support about it?

May I ask if you’re using any other plugin, for example WPRocket for caching or?

Under Elementor > Tools, you can try " Regenerate CSS & Data"?

Also, may I ask you to post and share your domain name in bracketed dot [.] notation (example[dot]com) here so we could double-check, troubleshoot and provide some more feedback information? :thinking:

Furthermore, may I ask if it’s working as expected when you Pause Cloudflare using the mentioned steps in my previous post? :thinking:

A helpful articles for troubleshooting:

Would be for a HTML document / URL article, page, or CSS/JS resources? :thinking:
If your origin is generating a cached HTML document, this could be the reason since Elementor wouldn’t load a “mobile CSS/JS” for menu, rather the origin would serve one HTML document for a desktop, keep it for 5mins and serve the same for any other user despite different device, as far as Cloudflare respects those HTTP cache headers.