Jump to content

Adding Header Injection to Just the Cart Page

Recommended Posts

Site URL: https://www.nathannixonphotography.com/cart

Hey all,

My website has been customized (Brine family) so that my header overlaps my homepages gallery banner - I think it looks great. However, this causes issues on other pages which don't have a banner as my Logo (which is in white) almost disappears. I have solved this on those white background pages with a simple header code injection to invert the color of the logo (and cart button) so that it turns to black.

However, on the Cart page of the site I am unable to access the settings menu of the page to actually inject any code so I can't use my solution to fix the page. I was wondering if anyone knew a way I could use to specifically target just the Cart page to get my Logo and the Cart Icon to invert to black? 

For reference, this is the code I am injecting on the pages such as my Store and Journal pages.

<style>
.Header-branding-logo {
    -webkit-filter: invert(100%);
    filter: invert(100%);
  filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1');
  }
</style>

<style>
.Cart {
    -webkit-filter: invert(100%);
    filter: invert(100%);
  filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1');
  }
</style>

Any help would be appreciated, thank you!

Link to comment
  • Replies 2
  • Views 953
  • Created
  • Last Reply

Add to Home > Design > Custom CSS

/* cart page id is cart */
body#cart {
	.Header-branding-logo {
    -webkit-filter: invert(100%);
    filter: invert(100%);
  filter:progid:DXImageTransform.Microsoft.BasicImage(invert='1');
  }
  .Cart {
      -webkit-filter: invert(100%);
      filter: invert(100%);
    filter:progid:DXImageTransform.Microsoft.BasicImage(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

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.