Alternating logo colour in transparent header - Prestige

Alternating logo colour in transparent header - Prestige

mev123
Excursionist
13 0 3

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?

Replies 7 (7)

BSS-TekLabs
Shopify Partner
2401 695 830

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.

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
mev123
Excursionist
13 0 3

Hi, haldin.se and password is beegle

BSS-TekLabs
Shopify Partner
2401 695 830

BSSTekLabs_0-1721664340089.png

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

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

 

If our suggestions are useful, please let us know by giving it a like or marking it as a solution.


Salepify: Efficiently increase sales conversion with sale-driven features like auto add to cart, free gifts (free plan available)


Salemate: Boost your AVO with 2-layer offer, countdown upsell in your post purchase page


BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
mev123
Excursionist
13 0 3

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

instasell
Shopify Partner
15 0 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.

        

Instasell

Guleria
Shopify Partner
3992 795 1134

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

- Custom themes, UI/UX design, ongoing maintenance & support.
- Drop an email   if you are looking for quick fix or any customization
- Email: guleriathakur43@gmail.com Skype: live:navrocks1
- Try GEMPAGES a great page builder
mev123
Excursionist
13 0 3

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