Elementor Sticky Header Scroll Effect Tutorial

Sticky Header Scroll Effect With Elementor

In this tutorial I want to show you how you can create a sticky header scroll effect with Elementor for your WordPress website.

It’s very easy to set up and I will show you right now how it’s done.
After the sticky effect has been added it will stick to the top of the page if a visitor scroll down.

Check out the tutorial to learn how it’s done in just a few simple clicks.

Table of Contents

Select Elementor Header template

The first thing you need to do is you have to go to the templates option over here in the menu and click on it.

Select Templates in wordpress

Then go to all to view all templates for your website. Now select the header and click on it.

Select Elementor Header Template Select Templates in wordpress

If you don’t have a header template created yet, then you can add a new one. If you have multiple templates added, make sure to select the one that is active and click on Edit with Elementor.

Select edit header with Elementor Select Elementor Header Template Select Templates in wordpress

Enable sticky header option in Elementor

Now you can see the header over here and at this point it’s not sticky yet.

To make it sticky you need to select the entire section of the header by clicking on it.

The next thing you need to do is go to the advanced tab and go to the motion effects.

You will see the option Sticky over here and now it’s been set to none. If you change this to top then the whole section will stick to the top of the page whenever a visitor scrolls down.

Elementor Sticky header scroll effect motion effects Select edit header with Elementor Select Elementor Header Template Select Templates in wordpress

Don’t forget to click on update to save all the settings if you want to set it back and you can select none again in the options.

In the video tutorial I will explain everything in more detail and you can watch it on YouTube over here.

In another tutorial I have explained how to set up the header and footer with Elementor.

Check out this tutorial to learn the Elementor basics in 7 minutes.

In other tutorials I have explained how to create cool effects such as:

I hope this tutorial is helpful. It that’s the case make sure to subscribe to the channel and drop a like and comment.
Thanks, and I hope to see you back in the next tutorial!