Sticky Elementor Logo Changes Color On Different Backgrounds

No extra plug-ins required! No JS libraries either.

Some people on the facebook group were wondering how to make this kind of dynamic logo depending on what kind of background it was over. While you can use the midnight.js library, it is not very user friendly. Here is a more simple way. The elementor logo changes color based on the background.

To begin with, in the page where it will be used, ALL the sections will need a background color.

The CSS will make the logo blend with this color, so it needs to be present.

Sticky Elementor Logo Changes Color On Different Backgrounds

Then, you will want a white logo.

Here is the actual text logo used in the example, without any css modifying it.

< Elementor Codes >

Finally, give the image or logo a CSS  class

And add the necessary code to make it sticky, and to mix with the different backgrounds. This is what will make the Elementor logo change color. Adjust the top and left values to fit your needs.

position: fixed;
left: 10px;
z-index: 999;
max-width: 400px;
mix-blend-mode: difference;

you can also test out different blend modes to see if you prefer one rather than another… see this page to learn all of the available properties.

et Voila! Thanks for reading and check out my others designs!

One Response

Leave a Reply