Astra Theme Having CLS Issue With Header Menu

I am having CLS issue with the desktop header of your Astra theme. This is affecting my website ranking as well. I have searched a lot online but couldn’t find any solution.

For your information, I am using a cache plugin called LiteSpeed Cache. Maybe it is having conflicts with the Astra Theme CSS. There is no HTML, Js, CSS optimisation enabled.

The issue is being caused by this CSS file: https://www.geekinstructor.com/wp-content/themes/astra/assets/css/minified/frontend.min.css?ver=3.9.2

Please check the attached image. The desktop menu appears vertically for a second and then changes to normal. This is causing CLS issue.

Image: https://www.geekinstructor.com/wp-content/uploads/2022/11/astra-header-cls.png

Please check the pointed menu in desktop header. Before the full web page is loaded, the theme blinks the desktop primary menu in vertical mode (as you can see in the screenshot). After full loading, it changes to normal. This desktop header primary menu is causing the CLS issue by shifting the layout.

I want to ask a question regarding this menu. Why Astra theme is loading it vertically when it is supposed to show in a horizontal format. This is being caused by the Astra Frontend CSS.

When I clear the cache, it gets fixed but starts to show up again after a while.

Please help me fix this. Don’t suggest to uninstall the cache plugin as it is not the solution. Cache plugin is must for speed optimisation on WordPress.

This issue isn’t just with my website but some other major websites that are using your theme are also having the same issue. I tried to contact Astra support via email but they didn’t provided any satisfactory solution.

Thanks in advance!

Best Regards