How to apply different BG color to header on home page

How To
1

Headers and footers are fixed for all pages on which they appear.
Is there a way to get the one header to use a different BG color on home page?
Or do I need to build two variants of the same header? (not ideal)

2

Hey Yalcin,

you could use some custom CSS for this. In the end it depends on what element you’re applying the background color on initially and if you’re setting it on the class or ID level.

Let’s say there is a block element in your header template you’re applying a background color on at the ID level. In this case the following CSS would override it for the home page as the body has a class of home in this case:

body.home #brxe-abc123 {
  background-color: redorange;
}

Of course you have to adjust the selector to your needs.

If you can’t figure it out yourself please share a link to your site so I can have a look and provide you with the exact selector that is necessary.

Best,

André

3

All good. I thought there may be a non-custom CSS way that I was overlooking.