Is it possible to make the header clear?

Topic summary

A user working with the Prestige Shopify theme wants to maintain a transparent header that doesn’t turn white on hover.

Solution Provided:
A support representative provided CSS code to be added to base.css, theme.css, or styles.css files. The code sets various header properties (background, border-color, text-color) to transparent values while maintaining the transparent logo visibility.

Follow-up Requests:

  • The user asked about changing logo color or making the white header visible only on product pages (since their logo is white and doesn’t appear on certain pages)
  • An updated CSS solution was provided using body:has(.content-over-media) selector to target specific pages
  • The user then requested help making the side drawer transparent instead of white background

Status: The header transparency issue appears resolved. The side drawer transparency request remains the current open question. Screenshots were shared throughout to illustrate the desired effects and results.

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

hi!

is it possible to keep this header clear and not turn white when I hover it? I work with the prestige theme

website: https://www.gallerychristian.com/

thanks!

Hi @christian_russo ,

You can try this code by following these steps:

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file base.css, theme.css or styles.css

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

x-header.header {
    --header-show-transparent-logo: 1;
    --header-separation-border-color: 0 0 0 / 0;
    --background: 0 0 0 / 0;
    --border-color: 0 0 0 / 0;
    --text-color: var(--header-transparent-header-text-color);
}

Here is result:

Hope this can help you

yes! thank you!

1 Like

Is it possible to change the color of the logo or only make the white header visible on the product page? because my logo is white it doesn’t appear anymore on product pages etc.

Hi @christian_russo , Pls try again with this code :

body:has(.content-over-media) x-header.header {
    --header-show-transparent-logo: 1;
    --header-separation-border-color: 0 0 0 / 0;
    --background: 0 0 0 / 0;
    --border-color: 0 0 0 / 0;
    --text-color: var(--header-transparent-header-text-color);
}

Here is result:

Hope this can help you

If our suggestions are useful, please let us know by giving it a like or marking it asa solution. Thank you :heart_eyes:

perfect thanks! is it also possible to make the side drawer sort of transparent like this:

would love to change it from white background to that

thank for your help!