HELP CHANGING HEADER & FOOTER ON PRODUCT PAGES

Hi 

I need some help with custom code please

On my homepage my header & footer are white with black text & logo - happy with this

On my product pages I'd like to make the header and footer pink and the logo & text in the header white

https://thelittlestitchclub.co.uk/

https://thelittlestitchclub.co.uk/shop-all-cross-stitch-kits/new-stuff

I've tried the code suggestions on the forum so far... I managed to change the footer to pink but then it also changed on my homepage and can't for the life of me get the header to change at all!

Thanks

Try this to change the background color, add to Header Code Injection in the store page Advanced settings:

<style>
.header .header-announcement-bar-wrapper .header-border {
    background: hsla( 15.43,77.78%,91.18% ,1);
}
</style>

Hi! 🙂

That's made the header pink on every page (including the homepage) and the text is still black

Any ideas?

Thanks

Did you put the code in the store page settings code injection or the global header code injection?

in the global header I believe

I went to developer tools -> code injection -> then typed it in the header section

How do I get to store page settings please?

Thanks

1 minute ago, LITTLESTITCHCLUB said:

How do I get to store page settings please?

Go to the pages menu, click on the gear icon next to the store page to get to the page settings, then go to advanced and code injection.

Hi again

That's changed the header to pink but the logo etc is still black not white and the footer has stayed white background.

Thanks

This should cover move of your requests:

<style>
  .header .header-announcement-bar-wrapper .header-border {
    background: hsla( 15.43,77.78%,91.18% ,1);
  }
  .header-title-logo img {
    filter: invert(1);
  }
  body:not(.header--menu-open) [data-header-style="solid"].header .header-nav-wrapper a {
    color:#ffffff !important;
  }
  body:not(.header--menu-open) [data-header-style="solid"].header .header-actions .icon--fill svg {
    fill:#ffffff;
  }
  body:not(.header--menu-open) [data-header-style="solid"].header .header-icon:not(.header-icon-border-shape-none).header-icon-border-style-outline {
    color:#ffffff !important;
  }
  #footer-sections {
    .page-section .section-border {
      background-color: hsla( 15.43,77.78%,91.18% ,1);
    }
  }
</style>