.jpg)
Easy Elementor Pro Sticky Header and Sticky Jump Links Tutorial
Writing copy for business owners online has taught me one simple truth: if people can’t find what they want fast, they leave. They're just in a hurry, and don't have time for maybe. Back in my door-to-door days, that meant a slammed door. Today, it means a click to your competitor’s site. Same problem, different century.
But on our clients' sites, that's not happening.
We use Elementor Pro’s sticky headers and sticky jump links in our content architecture all the time. Think of them both as friendly salesman who never walk away... They are always in view, and always ready to guide your visitor exactly where they want to go. They look sharp, they create a good user experience, and more importantly, they don't leave people searching around your site when they need to navigate, though you really want to pick one or the other. Using sticky headers and sticky jump links on the same page is probably a little too much.
In this quick tutorial, I’ll show you how to set them both up step-by-step. It’s straightforward, it works on desktop and mobile, and it’s one more quick skill you can pick up to give your site that “why didn’t I do this sooner” polish.
And if you want to take it a step further, turning those shiny headers and links into actual leads and sales, book a free 15-minute consultation with us at Chris McElroy SEO.
We’ll show you how to turn your website into a clean-cut, user focused lead generating machine.
Now, let's make your headers or jump links stay for the show and help people...
Step-by-Step Guide to Make an Elementor Pro Sticky Menu
Ok, Elementor Pro sticky headers are not that hard to create. Let’s make your menu behave like it’s supposed to. A sticky menu isn’t about showing off some flashy effect; it’s about keeping your most important navigation glued right where your visitors need it.
Follow the following easy steps to create Elementor Pro sticky headers that stick to the top, look professional on any device, and keeps people moving toward the good stuff instead of wandering off:
-
Open Elementor Editor:
Navigate to your WordPress Dashboard.Go to Pages and open the page you want to edit with Elementor. -
Select the Header Section:
In the Elementor editor, click on the header section (where your menu is located). -
Go to "Advanced" Settings:
On the left panel, click on the "Advanced" tab. -
Enable Sticky Header:
Scroll down to Motion Effects (under Advanced settings). Find the Sticky option and set it to Top for desktop, tablet, or mobile. Check or uncheck each device where you want it to stick. -
Additional Sticky Options:
Offset: Add 10–20px to avoid a "jumping" effect. Z-index: Set a high number (e.g., 999) so the menu stays above all content. Sticky on Scroll Up: Enable if you want the menu to reappear only when users scroll up. -
Publish/Update:
Click Update to save the changes.
How to Make the Anchor Links in Your Page Into a Sticky Menu
Keeping visitors engaged on your site isn’t just about good design, it’s about smart navigation. Turning your anchor links into a sticky menu makes it effortless for people to jump straight to the sections they care about without endless scrolling. \
The result?
A smoother user experience, longer time on page, and fewer visitors clicking away out of frustration. Plus, a sticky menu puts your key content and CTAs front and center at all times, which means more clicks, more leads, and more conversions.
-
Step 1: Add a Section for the Sticky Menu
1. Open your page in Elementor Editor.2. Click the plus (+) icon to add a new section.3. Choose a single-column layout.4. Drag a Text Editor Widget, Button Widgets, or an Icon List Widget into the section to create your jump links. -
Step 2: Create the Jump Links
1. Create anchor links using CSS IDs:Click the section where you want the link to jump to (e.g., the floor plans container).Go to the Advanced Tab.In the CSS ID field, enter an ID (e.g., floor-plans).
2. Add links in the sticky menu:In the Text Editor Widget, Button Widget, or Icon List Widget, enter the jump link:#floor-plansRepeat this for all sections (e.g.,#map,#renderings,#faq). -
Step 3: Make the Menu Sticky
1. Select the sticky menu section.2. Go to the Advanced Tab → Motion Effects.3. Under Sticky, choose Top.4. In the Offset field, enter a value (e.g., 80) to leave space for headers.5. Enable Sticky on Desktop, Tablet, or Mobile (as needed).6. Set a Z-index (e.g., 100) to make sure the menu stays above other elements.
Add a "Scroll to Top" Link: Add an extra button or icon in the menu that links to#topto let users quickly scroll back to the top.
