A Shopify store owner reported a visual bug where the navigation menu briefly displays in distorted blue-purple colors during page refresh/load. Screenshots showed the issue occurring on rmfbaits.ro.
Root Cause:
The problem stemmed from CSS preloading implementation using media="print" with onload="this.media='all'" for the component-mega-menu.css file in the theme.liquid file.
Proposed Solutions:
media="print" to media="all" and removing the onload attribute{{ 'component-mega-menu.css' | asset_url | stylesheet_tag }} and delete the original preload codeResolution:
The second solution successfully resolved the issue. The store owner confirmed the fix is working as expected.
Hello all,
Thank you in advance for help.
I have a problem with the menu loading, when I refresh the page. I have attached some pictures.
I don’t know exactly where the error comes from, I can’t identify it.
If you see, when loading, the menu appears in blue-purple and is distorted.
Site - www.rmfbaits.ro
Pw - [email removed]
Help me please?
Change the media=“print” Trick
Right now, your CSS is loading like this:
Replace it with this: (remove media=“print” and onload)
This code is located in the tag of the theme.liquid file.
Let me know if you need any help!
Hi @qadesign25 ,
I am from Mageplaza - Shopify solution expert.
In the theme.liquid file, place the following code before loading the base.css file.
{{ 'component-mega-menu.css' | asset_url | stylesheet_tag }}
Then, delete the code that calls the component-mega-menu.css file below.
Please let me know if it works as expected!
Best regards
Thank you! this solution working.
