Change logo while scrolling


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).



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://');
    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.


Great! It worked, however, the menu buttons jump down a bit which creates a larger bar (you can see it yourself via

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