Halloween Sale! 35% Discount on ALL plans! Coupon Code: HTREAT35 Grab The Deal

How To Create A Sticky Header In Elementor Free Page Builder?

how to create a sticky header in elementor

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. 

  • Fixed on Scroll: When someone scrolls down on your webpage, this sticky header will enable and will be fixed top.
  • Smart Scroll: When you scroll down you will see the header is gone. But as soon you scroll up, the header will pop up.
  • Fixed Scroll: This is very simple. No matter you scroll down or scroll up, it will be fixed always in the header.

Here is a short video for you where I’ve explained how to create sticky menu in Elementor editor. 

How To Create A Sticky Header In Elementor

First Download & Configure Master Addons

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.

Use Nav Menu Element In Header

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.

Header with navigation menu element

Set CSS ID

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.

Select Sticky Type

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.

select sticky header layout
Add that CSS ID here
paste CSS ID in nav menu element

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.

Posted in News Room

This is Roy and I produce content, Video, Documentation for Master Addons plugin User. Keeping you update through posts, videos is my duty. Also, I provide support for any users to solve their problems.

Get Elementor Pro

convinced enough to purchase

Download Now and Speed up your design skill

Still confused? Try 14 days Free Tiral before Purchase. Don't hesitate, we offer hassle free 30-day money-back guarantee.

Subscribe to our Newsletter

Share via
Share this