How can I create a transparent header on the home page that turns white on hover?

Store Design
1

Hi,

I’m looking to try and make a transparent header on the home page that goes white on hover as seen on this website https://www.alexachung.com/

Having it be sticky would be great as well.

I am using the debut theme, and so far all of the ways I have tried have messed up the mobile navigation menu and messed up the other pages (I only wanted this on the home page)

How could I achieve this?

Thanks.

2

Please add below css in bottom of assets/theme.css file

.template-index.is-scrolled-down header.transparent-header {
background-color: transparent;
}
.template-index header.transparent-header:hover {
background-color: transparent;
}

Thank you.