White font in transparent header, yet black in fixed header?

Hi everybody :-) And Merry Christmas!

I am making a webpage. The frontpage (home) is a full image with two sections below.

When the visitor enter the page, I wish the font and social media icons in the header on the image to be white, yet when they scroll down I want the header (fixed) has a yellow base and black font.

Does any one know how to do this? Make the font change colour depending on background?

At first it did it by it self, but now I can't figure it out.

I hope someone might be able to help out :-) 

All the best Tyra

Can you share site url? Which plan do you use: Personal, Business or Commerce? We can check easier.

Hi Tuanphan

Thanks for reply. The URL is www.seriouslyfun.agency / code: Marieersød

It just the homepage / frontpage I am thinking about

Best Tyra

On 12/26/2020 at 4:30 PM, dokkedahl said:

Hi Tuanphan

Thanks for reply. The URL is www.seriouslyfun.agency / code: Marieersød

It just the homepage / frontpage I am thinking about

Best Tyra

Add to Home > Design > custom CSS

/* header color before scroll */
header:not(.shrink) * {
    color: white !important;
    fill: white;
}

Hi Tuanphan

Perfect, it works. Thank you so much.

I wish you a happy new year and a great 2021!

Best, Tyra

Sorry - I have one more question...

When I see the frontpage on mobile, så three sidebars are black. Will it be possible to make them white as the Site header and social icons?

Best, tyra

1 hour ago, dokkedahl said:

Sorry - I have one more question...

When I see the frontpage on mobile, så three sidebars are black. Will it be possible to make them white as the Site header and social icons?

Best, tyra

Marieersød

Incorrect password

Seriouslyfun2021 

On 12/30/2020 at 8:07 PM, dokkedahl said:

Seriouslyfun2021 

Hi. Where is sidebar? Can you take a screenshot.

On 1/2/2021 at 8:18 PM, dokkedahl said:

Hi 🙂 First og all, thanks for taking a look at it again! 

I have marked the "sidebar" in the screendump with a red circle 🙂 

Best, tyra 

Add to Custom CSS

/* burger color */
body .burger-inner * {
    background: white !important;
    opacity: 1 !important;
}

Great - thanks!