Transparent to filled header

Site URL: https://www.satoribeauty.me/

Hiya!

On my client's website we have a black background on the header other than on the homepage where I have it transparent so you can see the image underneath.

The only problem is after you get to the bottom of the page and start scrolling back to the top the header appears and is still transparent which makes it hard to see.

Is it possible to make it so it's transparent when you land on the page, but the black background comes back upon scrolling up?

This is only on the homepage. The other pages are fine.

I'm using this code to make it transparent

.homepage header#header {
  background: transparent;
}

Site password: satoriworking

That's perfect @SquareRefresh thank you so much!!

Follow up.. is there any way to do the same to the dropdown menu? 😛 This is the coding I have for the dropdown menu transparency:

.header-nav-folder-content {
    background-color: transparent !important;
}

5 hours ago, Desnoir said:

This is the coding I have for the dropdown menu transparency

Hey @Desnoir just add next code:

.homepage header#header:not(.shrink) .header-nav-folder-content {
  background-color: transparent !important;
}

Amazing thanks so much!