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 3
  • 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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.