Header navigation and logo invert against background on scroll

Hey guys,

I was wondering if anyone knows how to make the logo and header nav links invert against the background as you scroll?
Similar to this site: https://www.highmoon-studio.com/

Thank you in advance!

https://penguin-marigold-6tge.squarespace.com/
PW: Rc123

Hey @tuanphan  was wondering if you had any ideas for this one? Thank you!

Try this code to Website > Website Tools (under Not Linked) > Custom CSS

@media screen and (min-width:992px) {
header#header {
    mix-blend-mode: difference;
    background-color: transparent !important;
}

header#header * {
    color: white !important;
}
}

@tuanphan I tried this code and it works, but it is also applying this effect to my custom nav links..I would only like this applied to my logo. Is this possible?

https://www.chrisscholzdesign.com

pw: CSDesign123

On 4/12/2024 at 3:21 AM, cscholz said:

@tuanphan I tried this code and it works, but it is also applying this effect to my custom nav links..I would only like this applied to my logo. Is this possible?

 

https://www.chrisscholzdesign.com

pw: CSDesign123

Change this ID

header#header * 

to this

header#header a#site-title 

thank you @tuanphan!! I have decided to keep the blend mode active on header title and links. Is there a CSS code to have it applied to mobile as well?

On 4/16/2024 at 11:49 PM, cscholz said:

thank you @tuanphan!! I have decided to keep the blend mode active on header title and links. Is there a CSS code to have it applied to mobile as well?

Change 992px in the code to 1px

@tuanphan wow, easy. Thanks for the reply good sir!