Change header colour on select pages

New Member
4 0 0

I am having a bit of difficulty making my site navigation and footer a different colour on select pages. I have a collection of products that I want to make the navigation and footer bar pink on. I used the following CSS and it worked for a little while - then stopped working and I cannot figure out why.

#collection.angel {
    background-color: #F8D5E0;}

Has anybody had any experience with this?

Thanks! :)

Shopify Staff (Retired)
Shopify Staff (Retired)
400 0 74

Hi Teale,

Britton here with the Shopify support team.

For your site it looks like the class of the html tag gets the collection specific class information. For example, on your angel collection your html tag gets this class: "teale-coco-angel-dusted-pink-collection" (amongst others). If you want to target this header bar specifically you would use this kind of syntax in your CSS: 

.teale-coco-angel-dusted-pink-collection .site-nav {
background-color: yourcolor;

For the rest of your pages use the inspect element tool to see what specific class the html element gets and then repeat the process. There may be some extra html elements that also need to be targeted to make the navigation bar look cleaner but hopefully this gets you on your way!


Britton Shopify Guru
New Member
4 0 0

Hello, i want to chang the site nav for my home page only : white for my homepage, #788188 for the rest. how do i can do it please ?