Transparent header for all pages on DESTOP version only

51 0 11

The only transparent header on website is my landing page. I would like my header to be transparent for all pages of my website for DESTOP version only. Could anyone help me?

PW: CollectionThree

Replies 3 (3)

Shopify Partner
470 44 83

It appears to be how you'd like it already.

Desktop (transparent):



Mobile (white background):


To change header color on mobile only, find or add this code to your themes base.css file then change background color as needed:

@media screen and (max-width: 989px) {
  .header--mobile-left {
    grid-template-columns: auto 2fr 1fr;
    background: red;





Hope that helps!


Don't hesitate to reach out for more help with your store.
SEE OUR TASK STORE or check us out via our profile! FREE STORE AUDIT
51 0 11

Hello, thank you for the feedback, but the transparent header of the website is the main page only but when i go to other pages of my website  its not transparent. Please see photos


Screen Shot 2024-01-27 at 4.35.54 PM.png

Screen Shot 2024-01-27 at 4.36.02 PM.png

Shopify Partner
4050 903 1556

Hi @clayinfo 

This is Richard from PageFly - Shopify Page Builder App


Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

@media screen and (max-width: 989px) {
body .header--mobile-left {
    grid-template-columns: auto 2fr 1fr;
    background: blue;

Hope this can help you solve the issue


Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!

PageFly - #1 Page Builder for Shopify merchants.

All features are available from Free plan. Live Chat Support is available 24/7.