Shopify themes, liquid, logos, and UX
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?
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
Hi, haldin.se and password is beegle
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:
- 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
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
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.
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
Hi! Ok thanks, what is the easiest option? How do I know what css code to use?
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025