mix-blend-mode

[clara_andrea]

I try with safari and yes it works perfectly, but with chrome the menu text stay white and doesn't appears except above visuals or if I hover it.

[felix_rabe]

@clara_andrea ok for chrome you have to make your background white. with this:

.lay-content{ 
background: white;
}

[clara_andrea]

@felix_rabe Thank you it works perfectly :)

The last thing is, when I'm on a page from the menu (about, shop), the name of the menu in question disappears. I don't know if it's still in the subject/due to the change of colors but before it wasn't like that so maybe there is something to add ?

[felix_rabe]

@clara_andrea this is because your active menu point is black (so its invisible with the mix blend mode). You have to make it white in the customizer.

[clara_andrea]

@felix_rabe Thank you so much for your help ! Everything is working !

[alvarodoze]

Hey @felix_rabe Can you help me with this too?🙏🙏 I'm trying to apply mix-blend-mode: difference; in the project-index but I can't get it. Any tips? https://alvarodoze.com/try-copy-2/

Cheers mate!!

[arminunruh]

i think it doesn't work if the div is not a direct parent of the background
i think it wont be possible with a projectindex

[yelmarb]

Hey @arminunruh is there a way of using "mix-blend-mode" but keeping the text either black or white instead of inverting the colors?

I've tried using all the different blend modes but they all have a reversed color output.

I've also tried using filter and grayscale but these don't work after the mix-blend-mode" function.

Would there be any java script that could dynamically change text to either black or white when scrolled over images?

[arminunruh]

no there is nothing like that

[arminunruh]

best way to do it is just this:

http://laythemeforum.com/topic/3704/change-color-of-fixed-sitetitel-menu-when-scrolling-down-page-according-to-changing-row-background/14

[yelmarb]

All good, thank you Armin!