Are you looking to create a sticky header in Elementor? A sticky header, which remains fixed at the top of a webpage as users scroll, can significantly enhance usability and accessibility, facilitating seamless navigation across your site.
With the Sticky Header Effects for Elementor plugin, you can easily create a sticky Elementor header with amazing effects.
Required Setup
- Elementor FREE Plugin installed & activated.
- Sticky Header Effects for Elementor Plugin installed & activated.
- Make sure a classic WordPress theme is installed & activated.
Key Features
- Scroll Distance – You can set the scroll distance from the top at when the sticky header will be activated.
- After Sticky – You can add different effects after the sticky header is activated.
- Transparent Header – You can make the sticky header transparent on scroll.
- Background Color – You can easily change the sticky header background color on scroll.
- Bottom Border – You can easily add a border button on scroll.
- Bottom Shadow – You can add a drop shadow on scroll.
- Shrink Header – You can shrink the sticky header on scroll.
- Shrink Logo – You can easily shrink the logo on scroll.
- Change Logo Color – You can easily change the logo color on scroll.
- Blur Background – You can make the sticky header background blur on scroll.
- Hide Header on Scroll Down – You can easily hide the sticky header on scroll down.
How to Use Sticky Header Effects for Elementor?
Once you install the Sticky Header Effects for Elementor plugin, from the Dashboard, go to Elementor > Sticky Header Effects.
It will start the onboarding process.
If you have Elementor free only, it will select Elementor Free, but if you have Elementor Pro as well, then it will automatically select Elementor Pro, which will allow you to create a sticky header with Elementor Pro.
Let’s suppose you have the Elementor Free version and click on the Next button.
On the next screen, you can subscribe to the newsletter or skip.
Then, on the next screen, click on the Enable Theme Builder button. It will install the free Nexter Extension plugin, which will allow you to create a header since, with Elementor Free, you can’t create a header.
After that, click on the Create Header button. It will create a header template with Nexter Extension.
On the next page, you can click on the Enable Header Templates button to use ready-made header templates from WDesignKit, or you can click outside the pop-up to create the header from scratch.
Let’s create the header from scratch.
Add the Container widget, then design the header content as per your requirements.
Once done, select the main Container widget of the header, then go to the Advanced > Sticky Header Effects tab and turn on the Enable toggle; this will create a sticky header.
You can click on the Live Demo button to see some template demos.
If you haven’t created the header manually yet, you can click on the Import Preset button to use a template from WDesignKit.
From the Enable On section can select the devices where you want the sticky header effect.
Then, from the Scroll Distance (px) section, you can set how far you have to scroll from the top to activate the sticky header effect.
From the After Sticky section, you can add different effects to the sticky header. Once you open the popup, you’ll see the following options –
- Offset – From here, you can set the distance from the top where the header will stick.
- Width – From here, you can change the header width once it becomes sticky.
- Padding – From here, you can adjust the header padding once it becomes sticky.
By enabling the Transparent Header toggle, you can make the initial header transparent, and once it becomes sticky, it will show the background.
From the Background Color toggle, you can change the sticky header background on scroll.
By enabling the Custom Menu Toggle Button, you can add a custom hamburger menu button. This will work with the Elementor Nav Menu widget only. From here, you can select the button type and adjust its style.
Then, from the Bottom Border toggle, you can add a bottom border to the sticky header.
You can add a drop shadow to the sticky header from the Bottom Shadow toggle.
Then, from the Shrink Header toggle, you can add a shrink effect to the sticky header on scroll.
By enabling the Shrink Logo toggle, you can shrink the logo on scroll.
You can change the logo color on scroll by enabling the Change Logo Color toggle.
From the Blur Background toggle, you can blur the header background on scroll.
By enabling the Hide header on scroll down toggle, you can hide the sticky header when scrolling down.
Once done, click on the Publish button, and your sticky header will be published.
Then, from the Dashboard, go to Nexter Extension > Theme Builder and set the appropriate display condition for the header template.
Now your sticky header will work on your site.
