Hi Maria,

You have to use Custom CSS:

By default bg is transparent , so here is how you can change it into pink color.

#sp-header {background: pink; }

About BG gradnient header after scroll down is based on CSS gradient, you can create your own style: https://cssgradient.io/

then use it inside { ... }

#sp-header::after {

 HERE

    }

1. I hope you already read how to use Custom CSS in Helix based templates in documenation.
2. We don't teach CSS here, so basics you have to learn alone, can give only tips.

Thank you Paul

I did the following #sp-header {background: #6699CC; } #sp-header::after { background: #6699CC; }

and the color changed for both menu and sticky menu no problem.

but for some reason the only page the menu background color did not change at the cart page where people go to pay for the goods.

The sticky menu is ok but the menu color background on the cart page is still the default gradient color.

any idea why and how to overcome this?

Thanks

Hi. The background property is a multi -property. Perhaps somewhere it has a stronger priority over your code. Therefore, it is better to use single properties for accurate configuration.

For example, to reset the gradient background, use such a code:

#sp-header, #sp-header::after {
    background-image: none; 
} 
/*Or to enhance the priority of your code*/
#sp-header, #sp-header::after {
    background-image: none !important; 
} 

Use "!important" only if there is no other way.

For solid color, use such a code:

#sp-header, #sp-header::after {
    background-color: #6699CC; 
}