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

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

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.