Change header colour on select pages

Teale_Coco
New Member
4 0 0

Hi,
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 header.site-nav {
    background-color: #F8D5E0;}

Has anybody had any experience with this?

Thanks! :)

0 Likes
Britton_Jenner
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

Britton Shopify Guru
0 Likes
Bapt1917
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 ?

0 Likes