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.
Prerequisites
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:
- Select the header section you want to make sticky. Click on the six dots that appear when you hover over the section.
- Navigate to the ‘Advanced’ settings.
- 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:
- Click on the six dots to select your sticky header again.
- Go back to the ‘Advanced’ settings.
- 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.
