July 27, 2023

Make it Stick with an Elementor Sticky Header

Play Video

Craft an Elementor Sticky Header, ensuring constant visibility on your display, for an optimal user navigation experience. Follow along with WPLearningLab to learn how to set it up with a few simple clicks.

What is an Elementor Sticky Section

A sticky section is a user-friendly feature that keeps a part of your website, like a menu or a header, visible as the user scrolls down the page. To create a sticky section, you’ll need Elementor Pro. The free version of Elementor is great, but it doesn’t offer the sticky section feature. So, if you’re serious about giving your website an upgrade, it might be worth considering the Pro version.


Before we get into the process, there are a couple of things you’ll need:

  • Elementor Pro
    This is the premium version of the Elementor page builder. It offers advanced features, including the ability to create sticky sections.
  • A section to make sticky
    This could be a menu, a header, or any other section of your site that you want to stick to the top of the page as the user scrolls.

Creating an Elementor Sticky Header

Creating a sticky header in Elementor is straightforward. Here’s how to do it:

  1. Select the header section you want to make sticky. Click on the six dots that appear when you hover over the section.
  2. Navigate to the ‘Advanced’ settings.
  3. Under ‘Motion Effects’, change the ‘Sticky’ option from ‘None’ to ‘Top’.

Now, as you scroll down the page, your sticky header should follow you!

Adjusting the Z-Index

But wait, there’s a problem. Your sticky header is hiding behind other elements on the page. This is where the Z-index comes in. It’s a way to specify the stack order of elements.

Here’s how to adjust the Z-index:

  1. Click on the six dots to select your sticky header again.
  2. Go back to the ‘Advanced’ settings.
  3. Change the Z-index to a higher value. We’ll use 999 for this example.

Now your sticky header should stand in front of all other elements on the page.

Conclusion of an Elementor Sticky Menu

So, there you go! You now know how to create a sticky header and a sticky menu with Elementor Pro. It’s a neat feature that can make your website more user-friendly. So why not give it a try? Experiment with different sections and see what works best for your site.

Required Resources

Elementor Logo
Free Options
Credit to WPLearningLab
WPLearningLab is a YouTube channel dedicated to providing comprehensive WordPress tutorials and resources for users of all skill levels. With a focus on simplifying complex concepts, the channel offers valuable insights on themes, plugins, and site optimization, as well as troubleshooting tips and best practices for creating and maintaining a successful WordPress website.
Make it Stick with an Elementor Sticky Header
Welcome back!
Enter your Helwp credentials to sign in.

No Account yet? Sign Up

My Account
Give Feedback
Describe your feedback *
Rate Helwp
Problem *
Describe the problem
Want us to reply?
Your E-Mail
Affiliate Disclosure

At Helwp, we’re committed to transparency and honesty. Therefore, we want to inform you that some of the links on our website are affiliate links. This means that, at no additional cost to you, we may earn a small commission if you click through and make a purchase.

We only promote products or services that we genuinely believe in. These affiliate commissions help us to maintain the website and continue to provide you with free, high-quality WordPress content.

If you are interested in how you can support us even further, check out our support page.