Header image color change when scrolling down


#1

Hi,

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

Cyril


#2

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.

Regards,
Kharis


#3

Hi,

Thanks you very much it works perfectly !

Best,
Cyril


#4

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,
Kharis