--- 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-05-31 lang: en author: "Aditya Sharma" description: "If you want to make your Elementor website more dynamic, changing the logo in the sticky header on scroll can help you achieve that. With the Site Logo widget from..." image: https://theplusaddons.com/wp-content/uploads/2023/10/How-to-Change-Logo-in-Sticky-Header-on-Scroll-in-Elementor_-1024x536.jpg word_count: 371 --- # How to Change Logo in Sticky Header on Scroll in Elementor? ## - Utilizes the Site Logo widget from The Plus Addons for Elementor to change the logo in a sticky header on scroll. - Requires both the Site Logo widget and Navigation Menu widget to be placed in the same container in Elementor. - Enables the Sticky Logo toggle in the Site Logo widget's Extra Options tab to display a different logo on scroll. If you want to make your Elementor website more dynamic, changing the logo in the sticky header on scroll can help you achieve that. With the Site Logo widget from [The Plus Addons for Elementor](https://theplusaddons.com/), you can change the site logo in a sticky header on scroll in Elementor. *To check the complete feature overview documentation of The Plus Addons for Elementor Site Logo widget, [click here](/docs/site-logo-widget-settings-overview/).* **Best Used For:** - Business and agency sites that use a transparent header on the homepage and a solid logo in the sticky state - Brands that display a full-color logo normally and a white/dark version when the header sticks - Any Elementor site using a custom header builder that needs a distinct sticky header logo ***Requirement  - This widget is a part of The Plus Addons for Elementor, make sure its 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) To do this, add both the Site Logo widget and the Navigation Menu widget to the header template and follow the steps below. > *Note: To create the header template, you can use the free *[*Nexter Builder*](https://nexterwp.com/docs/nexter-theme-builder-explained/)* or you can use Elementor Pro if you are already using it.*  https://www.youtube.com/watch?v=Tbb0zs1_Gv0&t=14s 1. Place both the Site Logo widget and the Navigation Menu widget in the same container or section in the Elementor editor. ![navigatior stracture](https://theplusaddons.com/wp-content/uploads/2023/10/navigatior-stracture.png) 2. In the Navigation Menu widget, select the appropriate **Menu Type**, **Menu Direction**, and menu from the **Navigation Bar** tab. 3. Enable the **Sticky Menu** toggle from the **Extra Options** tab. This activates the sticky behaviour for your navigation. ![site logo sticky logo](https://theplusaddons.com/wp-content/uploads/2023/10/site-logo-sticky-logo.png) To also change the header background color when the sticky menu activates, see [How to Change Sticky Header Color on Scroll in Elementor](/docs/sticky-header-color-on-scroll/). 4. In the Site Logo widget, select **Normal** from the **Logo Normal/Double** dropdown and add the logo. ![site logo normal logo](https://theplusaddons.com/wp-content/uploads/2023/10/site-logo-normal-logo.png) 5. Go to the **Extra Options** tab and enable the **Sticky Logo** toggle. ![site logo sticky logo](https://theplusaddons.com/wp-content/uploads/2023/10/site-logo-sticky-logo.png) 6. In the **Image Logo** section, add the logo. Select the image size and width as needed. Now you will see a different logo in the sticky header on scroll. ![site logo sticky logo demo](https://theplusaddons.com/wp-content/uploads/2023/10/site-logo-sticky-logo-demo.gif) For a glass blur effect on your sticky header, see [How to Create a Blurred Glass Sticky Header in Elementor](/docs/blurred-glass-sticky-header-in-elementor/). Also, read *[How to Change Site Logo on Hover in Elementor](/docs/change-site-logo-on-hover-in-elementor/).* ## Frequently Asked Questions **Q: What if the sticky logo doesn't change when I scroll?** A: If the sticky logo isn't changing on scroll, ensure that you've enabled the Sticky Logo toggle in the Site Logo widget's Extra Options tab. This setting is crucial for activating the sticky behavior of your logo. Additionally, check that both the Site Logo widget and Navigation Menu widget are placed in the same container within the Elementor editor. **Q: Can I use a different logo for mobile devices in a sticky header?** A: The page does not specify options for using different logos specifically for mobile devices. However, since The Plus Addons for Elementor allows for customization of headers, you might consider creating a separate header template for mobile views that includes a distinct logo. This can enhance user experience across devices. **Q: What are best practices for using a sticky header logo?** A: For optimal results with a sticky header logo, consider using a solid color version of your logo that contrasts well with your header background. This is especially important if you're using a transparent header on your homepage. Ensure that the logo is clear and recognizable at smaller sizes, as it will appear differently when scrolling. **Q: Does changing the sticky header logo affect site loading speed?** A: Using high-resolution images for your sticky header logo can impact loading speed, especially if they are not optimized. It's advisable to select an appropriate image size and width in the Site Logo widget settings to maintain performance while ensuring visual quality. **Q: How do I create a blurred glass effect on my sticky header?** A: To achieve a blurred glass effect on your sticky header, refer to the tutorial on [How to Create a Blurred Glass Sticky Header in Elementor](https://theplusaddons.com/docs/blurred-glass-sticky-header-in-elementor/). This effect can enhance visual appeal and provide a modern look to your website's design.