Transparent header for all pages on DESTOP version only

[clayinfo]

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

[biznazz101]

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

Result:

Hope that helps!
@biznazz101 

[clayinfo]

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

 

[PageFly-Richard]

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