Swap logo on scroll

Helpdesk Website Builder
1

Hi all :wave:,

I made a website menu with a transparent background (with a very dark background img on the banner) and on scroll it changes to a white background menu header. Now i want to show a white logo img at the start and change it to a black img after scroll…

I can’t find anything to get that to work correctly with SiteJet (i thought that this was very common feature) Anyone have any tips on how to get this done in SiteJet?

Also any upvotes for dropping this in feature request?

1 Like
2

Hi Martin,

When you scroll the site the menu preset gets a .sticky class and changes the background.

You can add 2 logos.

One is for the transparent background with dark image. You can add a class to it: logo-light

And another logo for the white background and add a class: logo-dark

In the custom CSS you can add the following code to the header preset:

.logo-dark{
display:none
}

.sticky{

.logo-light{
display:none}

.logo-dark{
display:initial}
}

I did this in many projects.

Let me know if you need more help with the CSS

Good luck!

4 Likes
3

Lifesaver! Thanks Imre! :raised_hands: :muscle: :muscle:

1 Like
4

Actually need to put the code, not in the header preset. Just place it after the menu preset but not within the menu preset because the whole menu preset gets the .sticky class when scrolled.

Something like the below:

.ed-element.preset-menu-any-kind-of-version {…}

.logo-dark{
display:none
}

.sticky{

.logo-light{
display:none}

.logo-dark{
display:initial}
}

2 Likes
5

Hello there

6

I can’t seem to change my sticky background in the preset styles, pls I need help with these