Header image color change when scrolling down


I would like to change the color of my company logo in the header from white to black when I start scrolling down the page.

How can I do that ?

Thank you,

Here is my website link : www.elum-energy.com


Hello there,

Thank you for asking.

Could you please try to add the following CSS code?

.header-scrolled .site-branding a{
  display: block;
  background-image: url('http://elum-energy.com/wp-content/uploads/2015/11/Logo-final-elum-white-2.png');
  background-size: 240px;
  background-repeat: no-repeat;

.header-scrolled .site-branding img{
  opacity: 0;

You should need to adjust the background image URL for the black version one.

You can use the Simple Custom CSS plugin to insert the code above.

I hope this reply helps.



Thanks you very much it works perfectly !


Hello there,

Glad to know that it works.

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

I’m happy to have an opportunity to assist you.

Warmest regards,