Change header color on just my home page

My homepage currently look like this (which is how I want it to look like), first picture.

However, the rest of my site has the cream color as the background so I want to have the colors in the header swapped to look like (second picture) with the header in the dark wine color and the logo and text in the cream color.

I know this is something to do with CSS, I just don't know how to do that.

I know I have to set the header to be in the dark variation for the whole site and then add custom CSS to change the colors for just the home page. I was wondering if anyone knows how to do that? Please help a girl out.

The color HEX codes are:

Cream - #FFF4EA

Burgundy - #331719

Thank you!

12 hours ago, WebDesignerVJubes said:

My homepage currently look like this (which is how I want it to look like), first picture.

However, the rest of my site has the cream color as the background so I want to have the colors in the header swapped to look like (second picture) with the header in the dark wine color and the logo and text in the cream color.

I know this is something to do with CSS, I just don't know how to do that.

I know I have to set the header to be in the dark variation for the whole site and then add custom CSS to change the colors for just the home page. I was wondering if anyone knows how to do that? Please help a girl out.

 

The color HEX codes are:

Cream - #FFF4EA

Burgundy - #331719

Thank you!

 

What is the website URL?

Thank you @paul2009!!! It worked!!! You are a lifesaver!!!

2 hours ago, paul2009 said:

Try this in Custom CSS panel:

.homepage [data-header-style="theme"].header {
  background-color: #FFF4EA;
}
.homepage :not(.header--menu-open) .header-nav-wrapper a {
  color: #331719;
}
.homepage .header-title-logo img {
  filter: invert(.9);
}

Example of it being applied:

Did this help? Please give feedback by clicking an icon below  ⬇️

Hi Paul! One more question. So I did this and it's almost perfect! Except it made my logo black. Is there any way to make the logo the burgundy color? You have been such great help!

1 hour ago, WebDesignerVJubes said:

I did this and it's almost perfect! Except it made my logo black. Is there any way to make the logo the burgundy color?

You can't change the colour of an image using CSS so the last part of the code simply inverts the logo color to make it visible. It's a compromise.

The only way to make it a specific color us to load another image in place of the existing one. There are a number of ways to do this but first you'd need to add the alternative image to your site and provide a link 🙂.

7 hours ago, paul2009 said:

You can't change the colour of an image using CSS so the last part of the code simply inverts the logo color to make it visible. It's a compromise.

The only way to make it a specific color us to load another image in place of the existing one. There are a number of ways to do this but first you'd need to add the alternative image to your site and provide a link 🙂.

How would I do that? I have the PNG and SVG of the logo in both colors. Thank you again, you have been super helpful.