Alternating logo colour in transparent header - Prestige

Store Design
, ,
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?