Unterschiedliches Logo im Sticky Header

 

The easiest way to have a different logo when your header is sticky is by using some CSS.

Step 1

Build your header and simply duplicate your logo. Change the Image URL and use a different class for each logo.
I use .logo1 for the first logo and .logo2 for the second one.

The structure looks like this :

Step 2

Add these CSS (kann auch im allgemeinen seitenweiten Stylesheet unter Manage > Stylesheets sein):

.logo2 { display: none }
header.oxy-sticky-header-active .logo1 { display: none }
header.oxy-sticky-header-active .logo2 { display: block }
 

That’s it. It’s just about showing and hiding the logos.

Note that for a better effect, both logos must have the same size.