How to Make a Header Sticky in Elementor

Keeping the header fixed at the top of the page solves two practical problems. First, if your header contains the main navigation menu, visitors can move to any section of the site without scrolling all the way back to the top. That reduces friction and keeps users on the page longer.

Second, if your header includes a call-to-action button, a promotional banner, or contact details, making it sticky means that information stays in view the whole time — not just when someone first lands on the page.

Both are proven ways to improve navigation and lower bounce rates on content-heavy pages.

Before building a sticky header in Elementor, you need a WordPress menu to put inside it. Go to wp-admin → Appearance → Menus. Click Create a new menu, give it a name (e.g. “Main Menu”), and add the pages you want to appear. Set its display location to Primary Menu, then save.

If you already have a main menu set up in WordPress, you can skip this step and use the existing one.

Then you can create the main menu as an Elementor header. You do this by going to the Elementor Templates and then theme builder. On the theme builder page, you can select the ‘Header’ section and then click on the option ‘Add New Header’.

On the pop-up screen, you can give a name to the header template and then click on ‘Create Template’. From here, you can be redirected to the Elementor editor page. You can choose a pre-built header template or create one from scratch.

You can add a two-column structure. Ensure that the content width of the section is ‘Boxed’. And you want to set the first column width to 20%. Add your site’s logo in the column and align the content to the left.

Then you can add the Nav Menu to the second section and ensure that you are using the main menu that you created earlier. You can set the Nav Menu to the right-hand side.

Now you have a header template built, it’s time to make it sticky. Click on the section to open the section settings, then go to the Advanced tab and find Motion Effects.

Under Sticky, select Top from the dropdown. Then use the Devices option to choose which screen sizes the sticky header applies to — desktop, tablet, mobile, or all three.

Click Publish to save the header template. When you preview the page, the header should now stay fixed at the top as you scroll.

Note: Motion Effects (Sticky) is an Elementor Pro feature. If you are using the free version of Elementor, you will not see the Sticky option under Advanced. In that case, plugins such as Sticky Menu (or Anything!) can add a sticky header to your site without needing Pro.