Home » News Room » How To Create A Sticky Header In Elementor Free Page Builder?
In this post, you will learn how to create a sticky header in elementor. There are different types of sticky header variations like – fixed on scroll, Smart scroll, Fixed Scroll. Let me explain these three sticky headers first.
Check Navigation Menu and Mega Menu docs for more info.
Here is a short video for you where I’ve explained how to create sticky menu in Elementor editor.
Make sure you have Downloaded Master Addons plugin and activated it on your website. You will get a Navigation Menu Element and Mega Menu extension.
Arrange your header using the Master Addons Navigation menu to create a sticky header. I have created a header for demo purpose and it looks like the following screenshot. Now click on “Edit Section” option.
Now navigate to advanced options. There you will see another option which allows you to insert “CSS ID”. Just insert any ID there and copy it. For example – I’m typing “sticky-header” ID there.
Now click on the navigation element, which helped you to arrange the menu bar in your header. From menu settings enable “Sticky Header”. Select your desired sticky header system from the dropdown list.
Paste the CSS ID that you have copied inside the container ID. As soon as you paste the ID you will get your desired sticky header.
Just publish the page and it’s better to save the header section as header template. So that you can import the Header section in any page when it’s necessary. It will save your time for future use.
[ I recommend you use the “Elementor Canvas” page template. It will help you to design your header in your way.]
That’s it and this is how you can create sticky header in elementor. Feel free to get in touch with us if you face any problem while arranging sticky header.