Remove Transparent Header from Prestige Theme

Store Design
,

Topic summary

A user needs to remove the transparent header in the Prestige theme because their black logo blends into the background cover image. They want a solid-colored header instead of the current transparent-to-solid transition on hover.

Two solutions were provided involving custom CSS code:

Solution 1 (PageFly-Henry):

  • Navigate to Online Store → Theme → Edit code
  • Open theme.css file
  • Add CSS targeting x-header.header.color-scheme.color-scheme--scheme-2 with a purple background (#dfd5ff)
  • Includes additional styling for white text color

Solution 2 (champ_singh):

  • Same navigation steps
  • Similar CSS approach but uses white background (#fff)
  • Includes height-observer display property adjustment

Both solutions modify the header’s background color through CSS overrides. The discussion remains open with no confirmation of which solution worked.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

Hello, I am trying to disable my transparent header at the top of my website page. My logo is black so it blends in with the background cover image. I would like the header to be a solid colour rather than transparent and then changes to a solid colour when the mouse is hovered over it! I am using the Prestige theme. Any solutions? TIA

2

Your store URL please?

3

Hi @biancapavlic

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 theme.css

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

x-header.header.color-scheme.color-scheme–scheme-2 {

background: #dfd5ff !important;

}

summary.h6 {

color: white !important;

}

Hope that my solution works for you.

Best regards,

Henry | PageFly

1 Like
4

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

Step 2: Search file theme.css

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

height-observer {
display: unset;

}

x-header.header.color-scheme.color-scheme–scheme-2 {
background: #fff !important;

}