Do you want a different logo to appear once your Elementor header becomes sticky? Unlike a simple color filter, the Logo Image Swap feature loads a completely separate logo image for the sticky state – ideal for non-monochrome logos, switching between a full wordmark and an icon, or a retina-optimised sticky logo.
With the Sticky Header Effects for Elementor plugin, you can easily swap the logo image in your Elementor sticky header on scroll.
To check the complete feature overview documentation of Sticky Header Effects for the Elementor plugin, click here.
Requirement – This feature is a part of Sticky Header Effects for Elementor PRO, so make sure both the Free & Pro plugins are installed & activated.
To do this, add the Elementor Container widget, then design the header content as per your requirements or use a header template and follow the steps –
1. Select the main Container widget of the header, then go to the Advanced > Sticky Header Effects tab and turn on the Enable toggle.
2. Turn on the Logo Image Swap toggle.
3. Choose your Sticky Logo Image – the image that replaces the logo when the header is sticky.
4. Optionally add a Retina Logo (@2x) – a higher-resolution version for retina displays.
5. If your logo uses a custom widget and the swap doesn’t work, enter a Logo CSS Selector (e.g. .site-branding img) to target the logo image.
The swap targets the Site Logo and Image widgets inside the header. To exclude a decorative image in the same section, add the CSS class not-logo to it.
