Elementor How to Make Header Sticky

There are numerous reasons why you would want to keep the header sticky. However, there are two main reasons that brands do this. One is that the header might include the menu, and this would allow the user to move around the website without having to scroll to the top of the page. Therefore, the user’s experience is improved and you can be sure that you can keep the audience.

Another reason is that your header might include some of the most important information for your user. It might include a special offer, social media buttons, or some sort of call-to-action. Therefore, you will want to have this information constantly at the forefront of the audience’s view.

So here is how you can make your header sticky.

The first thing that you need to do when you want to have a sticky menu, then you need to create a menu. This should be your ‘Main Menu’ on your website. You can do this by going to wp-admin, Appearance, and Menus. Then you can add the details of the menu that you would like to create.

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’ve created an Elementor Header, it is time to make it sticky. To do this, click on the Edit section, then go to Advanced, and then motion effects. Add the motion effect instructions you need for the website by selecting ‘Sticky to the Top’ and then choose the ‘devices’ where you want to have a sticky menu for.