Mix-blend-mode for Header Text

[evey_k]

Hi there,

I have a tricky situation here with the mix-blend-mode which i am trying to achieve with the header text on the image.

i have managed to solve the sitetitle and menubartitle, however it is so much more trickier to do so with the header text.

Currently, i have set my background white.

And i have tried many variations of the css and at the moment it is this:

div.col .no-offset .push-2 .span-12 .align-middle .no-parallax .type-text,
.text .lay-textformat-parent ._h5 {
mix-blend-mode: difference;
}

Here is the link to my page:
https://eveykwong.com/home-2

I am inexperienced in coding. But i believe i am almost there with the CSS as i think i am not getting the CSS Selector right. Please advise!

Thank you!

[evey_k]

@mariusjopen can you pls advise?

[Richard]

Dear @evey_k

Its not the selector that is the issue - Making the text mix-blend-mode:difference doesnt seem to have any effect - currently i do not know why, but hopefully this stops you doubting if it is the text or not :)

Best
Richard

[evey_k]

@Richard-K Is there a possibility for you or an expert from Laytheme to look into this? is paying fee the only solution?

[Richard]

Dear @evey_k

Sorry that i am a bit swamped at the moment, posting your issue on https://stackoverflow.com/ is how many people help each other online without the need for any fee's :)

Once again apologies that i couldn't help you further!

Sincerely
Richard

[alejandrxmunoz]

In case anyone else is looking for how to do the effect. The correct selector is ".laynav" and ".laynav, a" and the text color in the links or wherever should be white or well...try it.

.laynav {
mix-blend-mode: difference;
}
.laynav, a {
mix-blend-mode: difference;
}

https://www.alejandromunoz.com.ar/dtf/

[arminunruh]

ah very good!

also i noticed on iphone / mobile version
the mix blend mode didn't work for the site title

i noticed, mix blend mode may only work if the text that its applied to is a direct child of the body

so with this HTML it works:

<div class="mobile-title">Hello!</div>

but with this it doesn't:

<div class="mobile-title"><span>Hello!</span></div>

so for mobile to make it work for a site title on phone, you can use this script and css
in lay options -> custom css & html at bottom:

<script>
jQuery(".mobile-title span *").unwrap();
</script>
<style>
.mobile-title{
mix-blend-mode: difference;
}
</style>