Invert effect text on background

[dominikstefan]

How can I do the same effect as here: https://byus.global/ for my navigation bar (site title + menu) on top?

dominikschefer.com

Thank you

[joshsender]

not a lay theme person, just trying to help:

You can add "mix-blend-mode: difference" as css to the site title and nav:

.sitetitle, .laynav, .project-arrow, .mobile-title {
    mix-blend-mode: difference;
}

^ css you want to add! But the text needs to be WHITE to properly invert (so make your nav and title link colors white.

[alvarodoze]

Exactly what @joshsender said. I did it that way.
To make the nav white:

nav.primary a {
    color: white;
}

nav.mobile-nav a {
    color: white;
}

Check my website: http://alvarodoze.com and you can check my code in more detail.

[alvarodoze]

If you check the forum properly you will find a better answer.

[arminunruh]

ah yea very good answers!

[dominikstefan]

This post is deleted!

[dominikstefan]

thank you so much to everyone. desktop is working fine but I am having troubles with mobile. not sure how to fix the burger button and menu… any leads? @joshsender

[arminunruh]

nice website! ah i see u managed to do it for ur mobile version too