Jump to content

Inverting Colors in the Header on Specific Pages

Recommended Posts

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!

Link to comment
  • Replies 9
  • Views 2.6k
  • Created
  • Last Reply

Top Posters In This Topic

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);
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 8 months later...

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

Edited by annferrera
clarification
Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 7 months later...
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?

image.thumb.png.e3138c6b4e625cbd53920e5834d0d1ab.png

With shop page, your url doesn't exist

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 months later...

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

Link to comment
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
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 1 month later...
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.