burger/menu dynamic color adaptation

[mr.do]

Hello everyone,

I recently came across a website built with LayTheme (https://prideof.london) that has an interesting feature: the burger menu icon automatically adjusts its color based on the background - appearing light on dark backgrounds and dark on light backgrounds when viewed on mobile.

I assume this effect is achieved through custom CSS. How? Would it also be possible to implement the same dynamic color adaptation for desktop menu items as well?

Thank you for your help, and happy new year to all!
mr.do

[felix_rabe]

@mr-do this effect is called "mix-blend-mode" with the setting "difference" and a white color for the icon that you can apply with custom css.

[arminunruh]

yes very good @felix_rabe !

for page overlay burger:

.standard-overlay-burger{
   mix-blend-mode: difference !important;
   /*if your icon is black, use this:*/
   filter: invert(100%);
}

for desktop nav:

.desktop-nav{
   mix-blend-mode: difference !important;
   /*if your icon is black, use this:*/
   filter: invert(100%);
}

for desktop site title:

.sitetitle{
   mix-blend-mode: difference !important;
   /*if your icon is black, use this:*/
   filter: invert(100%);
}

[mr.do]

you guys are the best - thanks <3