Do you want a completely different header design to appear when your Elementor header becomes sticky? With the Header Replace on Scroll feature, you can show one header at the top of the page and swap in a different one the moment the header sticks – perfect for switching layouts, colors, or logos between states.
With the Sticky Header Effects for Elementor plugin, you can easily replace your Elementor header with a different design on scroll – with no separate template and no extra page-load cost.
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.
Instead of loading a separate template, you build both header designs as two sticky header sections and choose when each one shows. Follow the steps –
1. Create two header sections (Containers) inside your header – one designed as the normal (top-of-page) header, and one as the sticky header.
2. On each Container, go to the Advanced > Sticky Header Effects tab and turn on the Enable toggle.
3. Turn on the Header Replace on Scroll toggle on both Containers.
4. On the normal-look Container, set Sticky Visibility to Default (always visible).
5. On the sticky-look Container, set Sticky Visibility to Show only when sticky.
As the user scrolls, the plugin automatically hides the normal header and reveals the sticky one. The swap is handled entirely with CSS – no second template render, no AJAX, and essentially zero extra page-load cost.
