Hey,
I've implemented the following code to change the header logo (located in the nav bar), when you scroll down the page.
/* Change logo on scroll */
.shrink .header-title-logo img {
visibility: hidden;
transition: all 0s;
}
.shrink .header-title-logo a {
background-image: url(LINK);
background-size: contain;
background-repeat: no-repeat;
background-position: center center;
transition: all 2s;
}
/* Change logo on scroll */
However, I want the two logo versions to fade into each other, so it's not a sudden transition.
Also, the nav bar judders/expands ever so slightly, when you initially scroll. Is there a way to fix that?
Any help is much appreciated!
password: chartica
Thanks