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

On 5/31/2023 at 6:36 PM, LillianC said:

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

 

Orange like this?

With shop page, your url doesn't exist

Hey guys

My clients homepage is set up with a picture of her clinic and i have the header set to dynamic so the background is transparent and the text is white. When we scroll down it changes the background to black and keeps header text white. Could any of you help me out with the code needed so that when we scroll down it inverts the colours so the header background is black and the font and logo turn black?

An example of what i mean is shown on this site https://www.24seventalent.com/?source=blog.hubspot.com except their logo doesnt change. If this is not possible then i might have to pick a logo colour that shows up on dark and light backgrounds.

my site is www.ambermarieskin.co.uk

i only want the inversion to happen on the homepage. thanks a lot guys

Ross

On 8/25/2023 at 1:54 AM, Rossyb313 said:

Hey guys

My clients homepage is set up with a picture of her clinic and i have the header set to dynamic so the background is transparent and the text is white. When we scroll down it changes the background to black and keeps header text white. Could any of you help me out with the code needed so that when we scroll down it inverts the colours so the header background is black and the font and logo turn black?

An example of what i mean is shown on this site https://www.24seventalent.com/?source=blog.hubspot.com except their logo doesnt change. If this is not possible then i might have to pick a logo colour that shows up on dark and light backgrounds.

my site is www.ambermarieskin.co.uk

i only want the inversion to happen on the homepage. thanks a lot guys

Ross

Use this CSS code

body.homepage header#header.shrink {
    background-color: #fff !important
}

body.homepage header#header.shrink div.header-nav-item>a {
    color: #000 !important
}

body.homepage header#header.shrink .header-title-logo a {
    filter: invert(1)
}

body.homepage header#header.shrink a.btn {
    color: #000;
    border-color: #000
}

body.homepage header#header.shrink .sqs-cart-quantity {
    color: #000
}

body.homepage header#header.shrink .icon--cart {
    fill: #000
}

body.homepage:not(.header--menu-open) header#header.shrink .burger-inner>div {
    background-color: #000 !important
}

Hello @Rossyb313 did you manage to figure this out? I'm looking to do the same with a client site! Many thanks, Lauren

On 10/3/2023 at 10:46 PM, laurenruth1 said:

Hello @Rossyb313 did you manage to figure this out? I'm looking to do the same with a client site! Many thanks, Lauren

If you share link to page where you want to do this, we can help easier