Header Loading Issue on Mobile View

Actually it seems like the desktop menu in loading at the same time and then disappearing.

I have rolled back to Version 4.2.2 and the effect is less. Only a single line appears and not the complete desktop menu. I did think that this has only started happening recently. I am going to roll back another few versions and see if it helps.

Hi @confusedneedhelp,

This such Header behavior is always related to the optimization that has been done on the site, e.g. caching plugin. If you are using a caching plugin, please try to clear the cache and deactivate it. If it stops the behavior, then re-configure the plugin, so it won’t cause such a thing.

I hope it will help.

Kind regards,
Herman ??

Hi, thanks for the reply.

I normally have the Siteground Optimizer plugin working for static files and memcache. The dynamic/HTML caching is switched off. I did try turning it all off but it still does the same. Can you explain how you think caching can cause this and then maybe I can see what options I have. Otherwise, what settings do you recommend on the Siteground Optimizer plugin to “reconfigure” as I cannot see anything myself that could help.

Thanks for your help. It is much better with version 4.2.2. Only a line appears at the bottom of the header instead of the full desktop header.

Hi @confusedneedhelp,

Users who faced the same thing, they were able to get rid this odd behavior after they re-tweaked the optimization, including the caching plugin.

Does Siteground Optimizer has an option to separate the cache for Desktop and Mobile? If it does, please try it.

I hope it helps.

Kind regards,
Herman ??

Hi,

I have switched off all caching and the problem still exists. This is different to the other issues I have seen in this forum as the header only appears for a split second before disappearing. Did you watch the video?

I encountered a similar issue where the top bar from the desktop version appeared in the mobile version, so I rolled back to 4.2 to fix this problem. (I had also tried clearing the cache and disabling all optimization plugins, including Cloudflare, beforehand).

Hi hassadr, does the top bar of the desktop menu remain visible or does it flash up briefly and then disappear on page load like in the video link i posted?

Hi @confusedneedhelp,

Yes, actually it is the same. The optimization causes it. Besides caching plugin, do you have another optimization plugin, like minimize JS/CSS, etc?

And yes, I did watch your video.

Kind regards,
Herman ??

I can confirm there is no optimization or caching being used on the site and the same problem exists.

Hi, I really appreciate your great work. But I have the same problem since Astra 4.3.0. Two headers are loaded. This leads to massive CLS. Page speed drops from 99 to 60. The CLS increases from 0.00 to 0.6.

I’ve optimized my site well, but can’t find a way to achieve acceptable performance since 4.3.

To generate a separate cache for mobile view is the wrong practice. By the way, Astra itself also has massive problems with the header and CLS: See here: https://pagespeed.web.dev/analysis/https-wpastra-com-blog/cljjix25z5?form_factor=mobile
Do you care about the page speed rating of 13?

I agree that this problem exists since 4.3

I reported this to Astra support and this is the answer.

After reviewing the website, it seems that the issue you are facing is likely related to CSS media queries. I’d like to clarify that Astra uses two Header markups – one for desktop and one for mobile devices – and their visibility is controlled by CSS Media queries. If the CSS loading speed is slow, it can impact the markup, causing both headers to appear.

To resolve this issue, I recommend reaching out to your hosting provider or the support team of any cache plugin you might be using. They can help you improve the loading speed of the CSS on your website. For more information, you can refer to the attached article. [Link to article]

My website is pretty quick, sometimes depending on connection speed pages can take 2 or 3 seconds to load. Unfortunately now, since 4.3 if your website does not load instantaneously then you will have some CLS caused by the desktop header flash on mobile view. Not really sure what I can do about this. Does anyone have any suggestions other than changing the theme?

Ok, the fix is simple. Should have thought of it before. Add this to your css and the problem is fixed.

@media (max-width: 921px) { #ast-desktop-header {
display: none !important;
}
}

@media (min-width: 922px) { #ast-mobile-header {
display: none !important;
}
}

Thanks for sharing the CSS, @confusedneedhelp.

Anyway, please refer to this GitHub. The fix will be included in the next release.

Kind regards,
Herman ??