--- title: "How to Change Logo in Sticky Header on Scroll in Elementor?" url: https://theplusaddons.com/docs/change-logo-in-sticky-header-on-scroll-in-elementor/ date: 2023-10-27 modified: 2026-09-19 lang: en author: "Aditya Sharma" description: "A header that sticks to the top of the screen often needs a different logo from the one in the full-size header — a smaller mark, or a version that..." image: https://theplusaddons.com/wp-content/uploads/2023/10/How-to-Change-Logo-in-Sticky-Header-on-Scroll-in-Elementor_-1024x536.jpg word_count: 1599 --- # How to Change Logo in Sticky Header on Scroll in Elementor? ## - The Site Logo widget from The Plus Addons for Elementor swaps logos when the header sticks, but it follows the Navigation Menu widget’s sticky state, so both widgets must sit in the same container or section. - Sticky Menu in the Navigation Menu widget is off by default, and the sticky logo never appears unless a menu is selected in Select Menu and Sticky Menu is turned on in Extra Options. - Site Logo uses two separate images: Image Logo in Content shows the everyday logo, while Image Logo in Extra Options shows the sticky logo after scroll. - Logo Max Width starts at 100 px for both logos, and the sticky logo has its own width control in Extra Options that can differ from the normal logo. - The Site Logo widget does not read Appearance > Customize > Site Identity, and leaving Image Logo empty outputs an empty, zero-width container with no image, placeholder, or site name. A header that sticks to the top of the screen often needs a different logo from the one in the full-size header — a smaller mark, or a version that reads against a solid background. The **Site Logo** widget from The Plus Addons for Elementor can swap the logo the moment the header sticks. It does this by following the **Navigation Menu** widget's sticky state, so the two widgets have to work together. *To check the complete feature overview documentation of The Plus Addons for Elementor Site Logo widget, [click here](https://theplusaddons.com/docs/site-logo-widget-settings-overview/).* ***Requirement - This widget is a part of The Plus Addons for Elementor Pro, make sure it's installed & activated to enjoy all its powers.*** [LIVE WIDGET LINK](https://theplusaddons.com/elementor-builder/header-builder/?utm_source=tpae&utm_medium=docs&utm_campaign=text) ## Before You Start - **Edition:** **Pro** — **Site Logo** is a Pro-only widget. It does not exist in the free The Plus Addons for Elementor plugin, so there is no free version of it to fall back on.- **Prerequisite:** [Elementor](https://wordpress.org/plugins/elementor/) (free) installed and active, alongside The Plus Addons for Elementor Pro.- **Widget to enable:** **Site Logo**, under **The Plus Addons > Widgets**. Search for **Site Logo** and turn the toggle on.- **Where to put it:** a header or footer template, built with the free [Nexter Builder](https://nexterwp.com/docs/nexter-theme-builder-explained/) or with Elementor Pro's Theme Builder. The widget renders on an ordinary page too, but a header is where a logo belongs.- **An image in your media library.** The widget does **not** read the logo from **Appearance > Customize > Site Identity**. If you do not pick an image inside the widget, nothing is shown at all.- **For the sticky logo:** the **Navigation Menu** widget must also be switched on, placed in the **same container or section** as the Site Logo, pointed at a WordPress menu with **Select Menu**, and have **Sticky Menu** turned on in its **Extra Options**. Without it the sticky logo never appears.- **Two logo images** in your media library — the normal one and the one for the sticky header. > ***Read this before you start.** The sticky logo is not self-contained. It only works when a **Navigation Menu** widget with **Sticky Menu** turned on sits in the **same container or section** as the Site Logo. Without it both images are output but the swap never fires, and the editor gives you no warning.* https://www.youtube.com/watch?v=Tbb0zs1_Gv0&t=14s ## Set up the sticky menu - Edit your header template with Elementor and place the **Site Logo** widget and the **Navigation Menu** widget in the **same container or section**. This matters: the sticky behaviour is applied to the container that holds the menu, and the logo follows that container.- Select the **Navigation Menu** widget, open its **Navigation Bar** section and pick your menu in **Select Menu**.- Open the **Extra Options** section of the **Navigation Menu** widget and turn **Sticky Menu** on. It is off by default. ## Set up the sticky logo - Select the **Site Logo** widget. In the **Content** section set **Logo** to **Normal** and choose your everyday logo in **Image Logo**. Set **Logo Max Width**, which starts at **100 px**.- Open the **Extra Options** section and turn **Sticky Logo** on. It only appears while **Logo** is set to **Normal**.- Choose the sticky logo in the **Image Logo** control that appears underneath — the one inside **Extra Options**, not the one in **Content** — and set its **Logo Max Width**. ![Set Logo to Normal, then choose the image in Image Logo and size it with Logo Max Width.](https://theplusaddons.com/wp-content/uploads/2026/09/sitelogo-content.webp) ![Turn on Sticky Logo in Extra Options to reveal the sticky Image Logo and its Logo Max Width.](https://theplusaddons.com/wp-content/uploads/2026/09/sitelogo-sticky-logo.webp) Save and view the page. Scroll down far enough for the header to stick and the sticky logo takes over. ![After scrolling, the stuck header shows the sticky logo instead of the normal one.](https://theplusaddons.com/wp-content/uploads/2026/09/sitelogo-result-sticky.webp) ![The logo changing in the sticky header as the page is scrolled](https://theplusaddons.com/wp-content/uploads/2023/10/site-logo-sticky-logo-demo.gif) ## Settings | Setting | Where | What it does | Default | | ------- | ----- | ------------ | ------- | | **Select Menu** | Navigation Menu → Navigation Bar | Which WordPress menu the navigation shows. | — | | **Sticky Menu** | Navigation Menu → Extra Options | Makes the header container stick on scroll. Everything on this page depends on it. | Off | | **Logo** | Site Logo → Content | Must be **Normal**. **Sticky Logo** is not offered while this is **Double**. | Normal | | **Image Logo** | Site Logo → Content | The everyday logo, shown before the header sticks. | Empty | | **Logo Max Width** | Site Logo → Content | Maximum width of the everyday logo, per device. Range 0 to 1000. | 100 px | | **Sticky Logo** | Site Logo → Extra Options | Turns the sticky swap on and reveals the two controls below. | Off | | **Image Logo** | Site Logo → Extra Options | The logo shown once the header sticks. Same label as the one in Content — this is the one below **Sticky Logo**. | Empty | | **Only Svg Logo** | Site Logo → Extra Options | The sticky logo as an SVG, when **Logo Type** is **SVG**. | Empty | | **Logo Max Width** | Site Logo → Extra Options | Maximum width of the sticky logo, per device. Range 0 to 1000. | 100 px | ## How It Behaves Measured on the front end, before and after scrolling past the header: - **Both logos are always in the page.** Before you scroll, the normal logo is fully visible and the sticky one is fully transparent.- **The swap happens when the header sticks.** Once the scroll position passes the header, the container is marked as stuck, the normal logo fades out and the sticky one fades in.- **The trigger is the Navigation Menu, not the Site Logo.** The menu's script marks the container it sits in as sticky, and the Site Logo styling keys off that container. That is why both widgets have to be in the same one.- **The two logos are sized separately.** The **Logo Max Width** in **Extra Options** only affects the sticky logo, so it can be smaller than the full-size one. ## Where the logo image comes from **The logo is only ever the image you pick inside the widget.** The Site Logo widget does not read the logo set in **Appearance > Customize > Site Identity**, and it has no fallback of its own. With **Image Logo** left empty the widget outputs an empty, zero-width container: no image, no placeholder, no site name, nothing at all. This was checked twice, including on a site that had a logo configured in Site Identity — it still rendered nothing. In a flex header row that empty container is an invisible item you cannot see or click. ## Limitations - **Without a sticky Navigation Menu, nothing happens.** With **Sticky Logo** on and a sticky image chosen, but no **Navigation Menu** with **Sticky Menu** in the same container, both images are output and the swap never fires however far you scroll. The editor shows no warning, so the setting simply looks broken.- **Same container, not just the same header.** Putting the menu in a different container from the logo has the same effect as not having it at all.- **Sticky and hover cannot be combined.** **Sticky Logo** is only offered while **Logo** is **Normal**, so the same widget cannot also swap the logo on hover.- **There is no Site Identity fallback.** The widget ignores the logo set in **Appearance > Customize > Site Identity**. Leave **Image Logo** empty and it renders an empty, zero-width container instead of an image or a placeholder.- **The logo starts small.** **Logo Max Width** defaults to **100 px**, which is narrower than most logo files. If your logo looks tiny, this is why; raise it, the slider runs to 1000 px.- **There is no Style tab.** The panel has **Content**, **Extra Options**, **Need Help?** and Elementor's **Advanced** tab, and nothing else. Any spacing, border or background has to come from the Advanced tab.- **You cannot edit the alt text or the link title.** Both are set to your site name automatically, not to the image's own alt text and not to anything you can type in the widget. ## Not verified So you know exactly what has and has not been checked: - **The header template flow.** Everything was measured with the widget in an ordinary page container, which is what the sticky behaviour actually keys off. Building the header in Nexter Builder or Elementor Pro's Theme Builder was not reproduced.- **A control called "Menu Direction".** Earlier versions of this page asked you to set one in the Navigation Bar section. No such control was found in the widget, so it is not mentioned in the steps above. **Menu Type** and **Select Menu** do exist.- **The SVG path.** **Logo Type = SVG** and the **Only Svg Logo** controls were read in the plugin source only. No SVG logo was rendered and tested, so nothing about how SVG behaves is claimed here beyond the control's own instruction to choose an .svg file from the media library.- **Tablet and mobile.** **Logo Max Width**, **Hover Logo Max Width** and **Alignment** are responsive controls, but only the desktop value was measured. No tablet or mobile viewport was tested.- **Image Resolution other than Full.** Only the default **Full** was used.- **The sticky logo together with a hover logo.** The panel does not offer the combination, so it was not tested.- **Other ways of making a header sticky.** Only The Plus Addons' **Navigation Menu** with **Sticky Menu** was tested. A theme's own sticky header, or Elementor Pro's, was not. ## Troubleshooting ### I scroll and the logo never changes Almost always the **Navigation Menu** part. Check that the widget is in the **same container** as the Site Logo, that a menu is chosen in **Select Menu**, and that **Sticky Menu** is on in its **Extra Options**. Without all three the sticky logo does nothing. ### I cannot find the Sticky Logo toggle It is in the Site Logo widget's **Extra Options** section, and it only appears while **Logo** is set to **Normal**. Switch away from **Double** and it comes back. ### There are two controls called Image Logo There are. The one in **Content** is your everyday logo; the one in **Extra Options**, below **Sticky Logo**, is the sticky one. The same is true of **Logo Max Width** and **Only Svg Logo**. ### The sticky logo is the wrong size Use the **Logo Max Width** inside **Extra Options**. The one in **Content** only sizes the everyday logo. Both start at **100 px**. ## Related Docs - [Site Logo Widget Settings Overview](https://theplusaddons.com/docs/site-logo-widget-settings-overview/)- [How to Change Site Logo on Hover in Elementor](https://theplusaddons.com/docs/change-site-logo-on-hover-in-elementor/)- [How to Change Sticky Header Color on Scroll in Elementor](https://theplusaddons.com/docs/sticky-header-color-on-scroll/)- [How to Create a Blurred Glass Sticky Header in Elementor](https://theplusaddons.com/docs/blurred-glass-sticky-header-in-elementor/) ## Frequently Asked Questions **Q: Why doesn’t the logo change when the header sticks on scroll?** A: The swap only fires when the Navigation Menu widget is sticky in the same container as the Site Logo. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH ties the logo change to the menu’s sticky state, not to the logo widget by itself. If the menu is missing, in a different container, or Sticky Menu is off, both images can still render but nothing changes on scroll. **Q: What do I need before setting up a sticky logo in Elementor?** A: This setup depends on three things: Elementor free, The Plus Addons for Elementor Pro, and a Site Logo widget plus a Navigation Menu widget in the same container or section. The page also says you need two logo images in your media library, one normal and one sticky. That matters because the widget does not pull from Appearance > Customize > Site Identity, so an empty Image Logo field leaves nothing visible. **Q: Does the sticky logo work with a header built in Elementor Pro Theme Builder or Nexter Builder?** A: The feature is described as working inside a header or footer template built with the free Nexter Builder or with Elementor Pro’s Theme Builder. The key behavior still comes from the Navigation Menu widget’s sticky state inside that same container. In practice, the logo swap is not self-contained, so the menu and logo have to be placed together for The Plus Addons for Elementor to trigger it. **Q: How do I make the sticky logo smaller than the normal logo?** A: Use the separate Logo Max Width control in Extra Options for the sticky version. The normal logo and sticky logo are sized independently, and both start at 100 px by default. That separation is useful when you want a full-size header mark before scroll but a tighter mark once the header sticks. The Content tab width only affects the everyday logo. **Q: Why are there two Image Logo controls in Site Logo?** A: They serve different states. The Image Logo in Content is the everyday logo shown before scroll, while the Image Logo under Sticky Logo in Extra Options is the one that appears after the header sticks. The same split exists for Logo Max Width and Only Svg Logo. That design lets The Plus Addons for Elementor swap both image and size without mixing up normal and sticky states. **Q: What is the difference between Sticky Logo and hover logo changes?** A: Sticky Logo only appears while Logo is set to Normal, so it cannot be combined with a hover-based swap in the same widget state. That limitation keeps the behavior tied to scroll position instead of pointer interaction. If you need hover behavior instead, there is a separate doc for [How to Change Site Logo on Hover in Elementor](https://theplusaddons.com/docs/change-site-logo-on-hover-in-elementor/), but this tutorial’s setup is specifically for scroll-based switching.