Secondary Logo on Scroll - Horizon

Store Design
, , , ,
1

I have a sticky, middle center logo on my header. Can someone please assist me on how to change to secondary logo on scroll only? I am using the newest Horizon theme.

I’d like the ability to change to a secondary logo when users scroll. I would like it to be something that is selectable in my theme customizer. I know this will take many steps to do, I am familiar with adding and switching the theme’s code. Thanks in advance!

2

@tuckerkaide , can you share the store’s url?

3

The store’s url is https://sonnydecru.com/

4

Hi @tuckerkaide

Okay, but this won’t be possible using only CSS.
For this, we also need to add an option in the Theme Customizer, and we will need to make some changes to the existing scroll-related JavaScript used in the theme as well.

Best regards,
Devcoder :laptop:

5

Of course; I understand that! If you could provide the steps required that would be fantastic.

6

You can add this CSS code to Custom CSS in theme settings to do that without editing any code of the theme.

#header-component[data-sticky-state="active"] .header-logo__image-container img { 
  opacity: 0; 
}
#header-component[data-sticky-state="active"] .header-logo__image-container {
    background-image: url(add your second logo URL here);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

Best regards,
Dan from Ryviu: Product Reviews App

7

This worked almost perfectly! The only thing remaining is how do I change the size of the logo? I would like it to be the same size as the current logo, what is the css code for this? Don’t worry about getting it the same size as the current one, I can do that. Just need to know what the appropriate code would be.

8

Could you share the password to view your store so I can check and give you the code?