Alternating logo colour in transparent header - Prestige

Store Design
, ,

Topic summary

Alternating logo color in Prestige’s transparent header: show a white logo normally, switch to black on header hover to keep it visible against a white background.

Access details shared (haldin.se, password beegle) to allow inspection.

Proposed approaches:

  • Use two logo versions (white/black) and swap on hover or on inner pages with additional code.
  • Convert the logo to SVG to enable CSS-based color control (fill/stroke).

A CSS snippet was provided to force a black header background using a :has selector and --background variable, but it does not implement the hover behavior:

  • Result: header no longer turns white on hover; logo stays white.

Latest update: the logo was converted to SVG. The user asks for help to make the header turn white on hover and the SVG logo turn black, matching the Prestige demo (Allure).

Technical notes:

  • SVG enables color changes via CSS; hover behavior likely requires CSS targeting the header’s hover state to toggle background and logo color.
  • The provided selector targets transparent-header state but does not manage hover toggling.

Status: unresolved. Specific CSS for hover-driven color swap is requested.

Summarized with AI on December 24. AI used: gpt-5.
1

Hi,

I want to make my logo always visible i.e white when not hovering over the header, and make it become black when hovering over the heather. Otherwise it will vanish when hovering over the header since my logo currently is white, and the header background is also white. Is there any solution to this?

2

Hello @mev123 .
Our team is ready to help you.
Please share your website address and access password (if necessary) so that we can check and assist you.

3

Thank you for your question about “Alternating logo colour in transparent header - Prestige”.

While I’m unable to provide a specific answer at the moment, I recommend checking the Shopify documentation or reaching out to Shopify support for detailed assistance.

If your query is related to order tracking or shipping management, you might find our app helpful. It provides intuitive order tracking and powerful shipping analytics. You can check it out in the Shopify app store.

For immediate support, please don’t hesitate to contact Shopify’s customer service or consult their comprehensive help center.

4

Hi, haldin.se and password is beegle

1 Like
5

Hello @mev123 ,

They are 2 solution for it:

  1. Create a black version logo and display it on hover and inner pages.
    Additional code needed.

  2. Create svg format the logo and control its color with css.

Thanks

6

BSSTekLabs_0-1721664340089.png
BSSTekLabs_0-1721664340089.png588×339 11.4 KB

Because your logo format is white, it will not be possible to change the color to black.
You can handle it in the following ways.
Change the logo to svg format so you can css adjust the color.
Change the hover color to a color that makes the logo visible

  • You can also try the following:

  • Please follow these steps:

step.png
step.png1865×854 125 KB

  • Then find the base.css or theme.css file.
  • Then add the following code at the end of the file and press ‘Save’ to save it.
:has(.shopify-section:first-child [allow-transparent-header]):not(:has(.shopify-section--header+.shopify-section-group-header-group)) .header {
    --background: black !important;
}
  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
7

Hi, i tried it but now the header does not turn white when hovering over it. The logo is always white now.

I change it to an SVG in the brand sections. Could you plese help me so header becomes white when hovering over it, and so that the logo then becomes black? For reference, I want it to be like in the prestige theme boutique demo (allure) example

8

Hi! Ok thanks, what is the easiest option? How do I know what css code to use?