Jump to content

How do I keep my header from inverting on my product pages

Go to solution Solved by creedon,

Recommended Posts

I have this code put on in my custom css, which makes my header nav and title turn from white to black on hover.

#header:hover a,

#header:hover img,

#header:hover svg {

filter: invert(1);


But on my product page where the font is already black, it causes it to turn white on a white background. How do I keep my header from inverting on product pages?


Link to comment
  • Replies 2
  • Views 1.1k
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

  • Solution
body:not( .collection-type-products ) #header:hover a,
body:not( .collection-type-products ) #header:hover img,
body:not( .collection-type-products ) #header:hover svg

    filter : invert( 1 );

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

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.