Change logo while scrolling

Hi,

Is it possible to change the color of the logo when it scrolls down?
So i like to have a white version when its on the big photo and whenever you scroll down the original logo should pop up (replacing the white one).

website; www.avk-advies.nl

Thanks!
Remy

Dear Remy,

I assumed that you have already set the white logo through Appearance > Customize > Header area > Site branding > Upload your logo.

To replace it into the original whenever scrolling, try to apply the following CSS code:


@media only screen and (min-width:1025px){

  .header-scrolled .site-branding a{
    display: inline-block;
    width: 196px;
    height: 130px;
    background-image: url('http:// yoursite.com/path/to/otiginal-logo.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: top center;
  }

  .header-scrolled .site-branding a img{
    display: none;  
  }  

}

Please do adjustment accordingly.

You can apply the code above through the Simple Custom CSS plugin or child theme’s style.css.

Regards,
Kharis

Great! It worked, however, the menu buttons jump down a bit which creates a larger bar (you can see it yourself via http://avk-advies.nl)

Never mind the last post, it worked, had to change the height to 80px.

Thanks for the fast reply, its resolved!

Hi, I would like to have a dynamic menu that will change the position and size of the logo while scroll down, without change the menu, you can better check this website as an example.

I will appreciate any tip that alow me to have a similar menu style.

Best regards

Diego