Hello!
Basically I want to change the color of the logo & icons (inside the transparent header) on the product page.
The header’s background is white and the logo and icons are black.
When I have the transparent header active on any page, the header’s background is transparent and the logo and icons are black.
Well, on the product page, I would like to have the transparent header active WITHOUT changing the color of the logo and icons from black to white. This is because the product’s background is white and if the transparent header’s logo and icons would also be white, they would be invisible.
In short: I would want to have the transparent header active without changing the colors of the logo and icons ONLY on the product page.
I would really appreciate some help since I tried many codes but nothing seems to work.
My website is www.winnerofficial.com and my theme is Stiletto.
Hi @martujv ,
I haved checked your product page, I didn’t see the changing the color of the logo and icons from black to white. And they are fixed of header and be visiblely.
Your product page looks good as image:
Can you kindly share the details of your problem (screenshot/ record) with us? We will check it and suggest you a solution if possible.
It’s such my honor to help you, my dear friend!
Have a nice day!
Hello @martujv
Do you some like that
please go to your online store > edit code > assets > theme.css or base .css add below css code
.header {
background-color: transparent !important;
}
Hi @martujv
Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings.
.template-product .header { background: transparent; }
Sorry this is not what I asked for. The logo and icons are still white when it’s transparent and they only turn black once you scroll down.
Sorry this is not what I asked for. The logo and icons are still white when it’s transparent and they only turn black once you scroll down. And I would need it only on the product page.
Right now I don’t have the transparent header active on the product page because as I said it doesn’t look good unless I get the code I’m looking for.
As you requested, this code works only on the product page. Or maybe I misunderstood your meaning.
The only real problem is that there is still a white gap between the header and the product section, which makes it look like there is not a transparent header active. If there would be a way to remove the gap both in mobile and desktop versions then the problem would be solved!
