Learning how to make sticky header in Elementor helps maintain your website's navigation at the top of the page as users scroll. This feature enhances user experience and improves website usability on both desktop and mobile views. Follow this guide to add a sticky header in Elementor and customize it effectively.
Enable Sticky Header in Elementor Pro
To create a sticky header in Elementor, you need Elementor Pro, which includes advanced motion effects and scrolling behaviors.
- Open your WordPress dashboard and navigate to Templates > Theme Builder.
- Edit your existing Header or create a new one.
- Select the Section that contains your header.
- Go to the Advanced tab in the Elementor panel.
- Click on Motion Effects.
- Toggle Sticky to Top.
- Optionally, choose to display it on Desktop, Tablet, or Mobile.
Customize Sticky Header in Elementor
Once the header is sticky, you can enhance its appearance and behavior with additional settings.
- Effects Offset: Add space before the sticky effect triggers.
- Sticky On: Choose specific devices (responsive sticky header in WordPress).
- Header Background: Change background color when scrolling for better visibility.
- Z-Index: Increase the Z-index to make sure the header stays on top of all other content.
Add Sticky Header in Elementor Using CSS
If you're using the free version of Elementor, you can make your header sticky using custom CSS:
- Navigate to Appearance > Customize > Additional CSS.
- Add the following code:
header.elementor-sticky {
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 999;
}Replace header.elementor-sticky with your actual header selector if needed.
Ensure Sticky Header is Responsive
A sticky header should look and function smoothly across all devices—not just desktop. Elementor allows you to fine-tune how your sticky header behaves on tablets and mobile devices. Here's how to make sure it stays responsive and user-friendly:
- Check sticky visibility under Motion Effects for each device: Select the header section and go to the Advanced > Motion Effects panel. Make sure the Sticky option is enabled for the correct devices (Desktop, Tablet, or Mobile). If it’s only applied to Desktop, it won’t function on smaller screens.
- Test header height and alignment in mobile and tablet preview modes: Switch to Responsive Mode in the Elementor editor and preview how the sticky header behaves on various screen sizes. Adjust logo size, menu alignment, and button spacing to avoid cramping and misalignment.
- Adjust padding and spacing to avoid content overlap: Sticky headers can sometimes overlap content below them, especially on mobile where screen space is limited. Add top padding or margin to your first section after the header, and reduce the header height using responsive settings to preserve readability.
- Use a simplified mobile header layout: If your desktop header has multiple elements (e.g., social icons, multiple menu links), consider creating a mobile-only version using Elementor’s Responsive visibility settings. Hide complex elements on mobile and use a hamburger menu for cleaner navigation.
Troubleshooting Sticky Header Issues
If your Elementor sticky header isn't behaving as expected—such as not appearing, flickering, or overlapping page content—there are several ways to fix it quickly using Elementor’s built-in controls and layout settings.
Common sticky header problems and how to solve them
- Header not sticking: Make sure sticky behavior is enabled under Advanced > Motion Effects > Sticky and set to the appropriate device type. Also check that the header’s Z-index is set higher than the content below (e.g., 999 or more), so it remains visible as you scroll.
- Flickering header: If the header jumps or flickers during scrolling, disable any entrance animations or scroll effects applied to the header or surrounding sections. These animations can interfere with sticky behavior, especially in combination with third-party scripts or transition delays.
- Overlap issues: If your sticky header covers the content below it, you likely need to create visual spacing. Add top margin or padding to the first section following the header—ideally equal to or slightly more than the header's height (e.g., 70–100px).
Useful Links
How to Create a Sticky Header on WordPress – Elementor’s official guide for enabling the sticky header feature using Elementor Pro’s Motion Effects.
How to Create a Shrinking Sticky Header – Elementor’s expert tutorial on adding a shrinking effect to your sticky header for a sleek UX.
Elementor Motion Effects Documentation – Official reference on Sticky, Effects Offset, device visibility and advanced scroll-based behaviours.
Sticky Header Effects for Elementor Plugin – A free plugin that adds 10+ scroll effects (background change, blur, shrink, hide-on-scroll) to elevate your sticky header design.
Your Elementor Website Can Do Even Better!
Elfsight created dozens of useful widgets to make your website more attractive and boost its performance in so many ways. Try these no-code solutions for free on Elementor!
Conclusion
Adding a sticky header in Elementor enhances navigation and keeps your branding accessible at all times. Whether you use Elementor Pro or custom CSS, make sure to test it on all devices. A well-designed sticky header not only improves user experience but also adds a professional touch to your WordPress website. Now you know how to make Elementor header sticky in just a few steps.
