# Swap logo on scroll

**URL:** <https://community.sitejet.io/t/swap-logo-on-scroll/1058>\
**Category:** Website Builder\
**Tags:** cms\_menu\
**Created:** [September 22, 2021, 9:48am UTC](https://community.sitejet.io/t/swap-logo-on-scroll/1058 "2021-09-22T09:48:51Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Martinus\_Visser](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/martinus_visser/32/665_2.png) [@Martinus\_Visser](https://community.sitejet.io/u/Martinus_Visser)\
**Post date:** [September 22, 2021, 9:48am UTC](https://community.sitejet.io/t/swap-logo-on-scroll/1058/1 "2021-09-22T09:48:51Z")

</div>

Hi all 👋,

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?

---

<div class="post-metadata">

**Author:** ![Imre\_Fekete](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/imre_fekete/32/27_2.png) [@Imre\_Fekete](https://community.sitejet.io/u/Imre_Fekete)\
**Post date:** [September 22, 2021, 10:21am UTC](https://community.sitejet.io/t/swap-logo-on-scroll/1058/2 "2021-09-22T10:21:07Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![Martinus\_Visser](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/martinus_visser/32/665_2.png) [@Martinus\_Visser](https://community.sitejet.io/u/Martinus_Visser)\
**Post date:** [September 22, 2021, 11:09am UTC](https://community.sitejet.io/t/swap-logo-on-scroll/1058/3 "2021-09-22T11:09:32Z")

</div>

Lifesaver! Thanks Imre! 🙌 💪 💪

---

<div class="post-metadata">

**Author:** ![Imre\_Fekete](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/imre_fekete/32/27_2.png) [@Imre\_Fekete](https://community.sitejet.io/u/Imre_Fekete)\
**Post date:** [September 22, 2021, 11:36am UTC](https://community.sitejet.io/t/swap-logo-on-scroll/1058/4 "2021-09-22T11:36:46Z")

</div>

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}  
}

---

<div class="post-metadata">

**Author:** ![Pelumidavid125\_Somefun](https://avatars.discourse-cdn.com/v4/letter/p/ecc23a/32.png) [@Pelumidavid125\_Somefun](https://community.sitejet.io/u/Pelumidavid125_Somefun)\
**Post date:** [July 25, 2023, 7:43pm UTC](https://community.sitejet.io/t/swap-logo-on-scroll/1058/5 "2023-07-25T19:43:30Z")

</div>

Hello there

---

<div class="post-metadata">

**Author:** ![Pelumidavid125\_Somefun](https://avatars.discourse-cdn.com/v4/letter/p/ecc23a/32.png) [@Pelumidavid125\_Somefun](https://community.sitejet.io/u/Pelumidavid125_Somefun)\
**Post date:** [July 25, 2023, 7:45pm UTC](https://community.sitejet.io/t/swap-logo-on-scroll/1058/6 "2023-07-25T19:45:02Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Imre\_Fekete](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/imre_fekete/32/27_2.png) [@Imre\_Fekete](https://community.sitejet.io/u/Imre_Fekete)\
**Post date:** [July 11, 2024, 11:37am UTC](https://community.sitejet.io/t/swap-logo-on-scroll/1058/7 "2024-07-11T11:37:56Z")

</div>

there is only sticky class for the menu presets

---

<div class="post-metadata">

**Author:** ![Andre](https://dub1.discourse-cdn.com/flex017/user_avatar/community.sitejet.io/andre/32/3459_2.png) [@Andre](https://community.sitejet.io/u/Andre)\
**Post date:** [July 11, 2024, 1:39pm UTC](https://community.sitejet.io/t/swap-logo-on-scroll/1058/8 "2024-07-11T13:39:45Z")

</div>

Closed on July 11, 2024, 1:39pm UTC