Specific site header - color change on scrolling

Hi, i am creating a new site using the Airi Agency demo.

I changed the color options of my website to my liking. The problem is, that the Home site is adapting these changes. I found a code snippet to change the Home site header to transparent again.

This is the code I added to the custom css:
.page-id-203 #masthead {
background-color: transparent;
}
Now the header stays transparent even if it is scrolled. I would like to change the header color to NOT transparent when the site is scrolled.

Things that I found:
Header color scroll
and Here the direct css solution, but i am unable to implement it.
I am not good with css and have checked the forum and the web but can not find a solution.

It would be awesome if someone could direct me to a post, that I missed or could give me a hint to the missing code.

Many thanks, Ouro.

Hello Ouro,

I would be glad to help you, but can you please provide a link to your website?

Kind Regards, Roman.
aThemes Support

Hi, sorry for the late reply :grimacing:

Here the link to my website: ouroboros.com.de

Kind Regards, Ouro.

Hello Ouro,

Try to use this CSS code instead of what you mentioned above.

You can add CSS code in Customize → Additional CSS section.

.page-id-203 #masthead-sticky-wrapper:not(.is-sticky) #masthead {
    background-color: transparent;
}

img.custom-logo {
    transition-duration: 0.5s;
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.
aThemes Support

Hi roman,
thank you for the code and for the additional transition-duration, it works perfectly.

Kind Regards, Ouro

You’re welcome Ouro!

Kind Regards, Roman.
aThemes Support

We have to upgrade to Pro just to edit the header??

Hello,

We have to upgrade to Pro just to edit the header??

No, you don’t have to upgrade to Pro just to edit the header.

But please create a new topic to keep the forum in good order and make it easier to help you.

Kind Regards, Roman.
aThemes Support