Transparent header for all pages on DESTOP version only

clayinfo
Excursionist
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?

www.constructionlayers.com

PW: CollectionThree

Replies 3 (3)

biznazz101
Shopify Partner
470 44 83

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

Desktop (transparent):

biznazz101_0-1706294872860.png

 


Mobile (white background):

biznazz101_1-1706294913592.png



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;
  }

 

Result:

biznazz101_2-1706295620105.png

biznazz101_3-1706295662972.png



Hope that helps!
@biznazz101 

 

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
clayinfo
Excursionist
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

PageFly-Richard
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>

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

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.