How to manage logotytpe when scolling downwards

Can I define another logotype appearing when a user is scrolling downwards on my site?

Meaning that the menu changes to a fixed upper menu. I would like to use in this upper menu a different logo. Is this possible?

Hello,

You can try to set a different background-image for the following selector (SVG version):

Code: Select all

.svg #gkLogoSmall.cssLogo

and PNG version using the following selector:

Code: Select all

#gkLogoSmall.cssLogo

Great! However, please elaborate further where this code should be inserted and how to specify the "new" logo.

You have to add it at the end of the styleX.css file (X depends from style which you are using).

Code: Select all

#gkLogoSmall.cssLogo {
background-image: url('../images/styleX/logo_small.png')!important;
}
.svg #gkLogoSmall.cssLogo {
background-image: url('../images/styleX/logo_small.svg')!important;
}

Please remember to replace the X in the path to image in the above CSS code to your style number.

Thank you! I will try and let you know if it works.

You have to add it at the end of the styleX.css file (X depends from style which you are using).

Code: Select all

#gkLogoSmall.cssLogo {
background-image: url('../images/styleX/logo_small.png')!important;
}
.svg #gkLogoSmall.cssLogo {
background-image: url('../images/styleX/logo_small.svg')!important;
}

Please remember to replace the X in the path to image in the above CSS code to your style number.