How to make the header change color once you scroll down

Retired Boards Appdev Store Design
1

How can I make the header transparent only at the top of the page! I want it to change to its original color once you scroll down!

IMG_6869.png
IMG_6869.png1179×2556 253 KB

This image shows it being transparent!

When I scroll down, it’s still transparent, I’d like it to be back to its normal color once you start scrolling down, thanks!

2

Hey @omar_ab

Go to Online Store > Theme > Edit code > find theme.css file and add the following

.site-header--sticky.active {
	background: var(--header-background) !important;
}