How can I code a transparent header for desktop only?

Shopify Discussion

Topic summary

A user needs to implement a transparent header exclusively for desktop view while keeping the mobile and tablet headers opaque. The original code they received made all versions transparent.

Three solutions were provided:

  1. PageFly-Henry’s approach:

    • Edit base.css file in theme code
    • Add media query targeting screens above 767px width
    • Apply white background to .header-wrapper

  2. dmwwebartisan’s solution:

    • Similar method using base.css
    • Media query for max-width 767px
    • Sets background color #fff for .header-wrapper

  3. Moeed’s alternative:

    • Modify theme.liquid file
    • Insert custom code above </body> tag
    • Includes visual examples showing desktop vs mobile results

All solutions use CSS media queries to target desktop screens specifically, ensuring the transparent header only appears on larger displays while maintaining standard headers on mobile devices.

Summarized with AI on November 18. AI used: claude-sonnet-4-5-20250929.
1

I needed to make my header transparent only on the desktop version and I asked for coding earlier and a supporter in the shopify discussion gave me the coding but the coding made the mobile and tablet version’s header transparent as well but I only need the desktop version header to be transparent so does anyone know to make it only for the desktop version. my website is www.missartz.com

2

Hi @MissArtzz

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

@media (max-width: 767px){

.header-wrapper {

background: white !important;

}}

Hope that my solution works for you.

Best regards,

Henry | PageFly

3

@MissArtzz

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at the bottom of the file → Save

@media (max-width: 767px){
 .header-wrapper {background: #fff !important;}
}

Thanks!

4

Hey @MissArtzz

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above tag

Desktop:

Moeed_0-1690614373889.png
Moeed_0-1690614373889.png1902×668 168 KB

Mobile:

Moeed_1-1690614400600.png
Moeed_1-1690614400600.png328×561 149 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like