Inverting Colors in the Header on Specific Pages

Site URL: https://www.nela-nela.com

Hello, I am trying to fix an issue. I found several partial solutions here but no complete solutions.

Website is www.nela-nela.com

On most of the website the header (navigation text, logo, social icons, cart icons) are white, which is good with our background images.

However, on the product pages of our shop, we don't want to have a background image, and the header is lost in the white background.

I found code to change the color of the navigation links and to invert the color of the site logo, but I couldn't find code to do this for the social media icons or the shopping cart icon.

In addition, all the code I found, I added through the "Code Injection" function on the Shop page. However, this also changes the header color in the shop (https://www.nela-nela.com/shop), which we don't want to be changed.

Very specifically, these are the pages which we want to change.
https://www.nela-nela.com/shop/p/superfruit-leaf-tea-collection
https://www.nela-nela.com/shop/p/blueberry-leaf-tea
https://www.nela-nela.com/shop/p/blackberry-leaf-tea
https://www.nela-nela.com/shop/p/mulberry-leaf-tea

Can anyone help us figure out how to change all elements in the header (navigation, logo, social media icons, cart icon) from white to black on these pages only?

Thanks!

It looks like you solved? except logo still white? Use this ocde for logo

/* individual products logo */
body.collection-type-products.view-item header#header img {
    filter: invert(1);
    -webkit-filter: invert(1);
}

Hello, I'm having the same challenge. I know nothing about CSS.

Let's say I would like to have on the page "Mima" the header section inverted - I have no logo and bg is black and text is white.  (I want it to be bg white and text black.

How can I do it?

Thank you so much in advance

On 10/4/2022 at 3:59 PM, annferrera said:

Hello, I'm having the same challenge. I know nothing about CSS.

Let's say I would like to have on the page "Mima" the header section inverted - I have no logo and bg is black and text is white.  (I want it to be bg white and text black.

How can I do it?

 

Thank you so much in advance

What is your site url? We can help easier

I am having same problem. I need menu navigation text and also logo to be orange when on pale backround here:

https://www.rooftopbar.co/gallery

And inverse (white) on these pages
https://www.rooftopbar.co/
https://www.rooftopbar.co/giftvouchers

Also how do I stop the logo turning blue on the shop page? There seems to be an overlay applied.

https://www.rooftopbar.co/shop-1