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. 

  • 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
CSS ID from advanced 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.

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.

Master Addons Demos

Heading

Animated Headlines
Dual Heading
Gradient Headline

Image

Image Hover Effects
Image Hotspot
Filterable Image Gallery
Image Comparison
Gallery Slider
Advanced Image

Content

Advanced Accordion
Tabs
Toggle Content
Team Member
Team Slider
Infobox
Flipbox
Blog
Timeline
Business Hours
Pricing Table
Restrict Content
Dynamic Table

Special Elements

Call to Action
Tooltip
Progress Bar
Progress Bars
Creative Button
Creative Links
News Ticker
Table of Contents
Current Time
Domain Search
Nav Menu
Search
Blockquote
Counter Up
Countdown Timer

Extensions

Particles
Animated Gradient BG
Reading Progress Bar
Background Slider
Custom CSS
Custom JS
Positioning
Container Extras
Mega Menu
Entrance Animation
Transforms
Rellax
Reveal
Header,Footer,Comment
Display Conditions
Dynamic Tags
Floating Effects
Custom Breakpoints
Post/Page Duplicator
Wrapper Link

Contact Form

Contact Form 7
Ninja Form
WP Forms
Gravity Forms
Caldera Forms
weForms