How to create a sticky header with a one page menu in Elementor?

In this step by step article you will learn how to add a sticky header with a one page navigation menu inside of Elementor.

Step 1

Create Menu

Add a new menu to your Elementor website: Appearance >> Menus >> Create a new menu

Step 2

Setup Menu

Give your menu a name and click on the create menu button.

Step 3

Add Menu Items

Go to the custom links section in the sidebar and add a URL and a Link Text for your menu item. The URL has to have a # sign at the beginning and correspond with the section ID you add later on in the Elementor Page.

 

* Each menu item will link to a specific section on the page.

* Don’t forget to save your menu once adding all the menu items.

Step 4

Add Nav Menu Widget

Create a new section inside of your Elementor page and drag inside the Nav Menu widget.

Step 5

Configure Menu

Choose the new menu you created in the menu settings.

Step 6

Make Section Sticky

Section Settings >> Advanced >> Motion Effects >> Sticky

 

* Don’t forget to add a background to your section otherwise it will be transparent.

Step 7

Add ID’s to Sections

Add the ID’s to the sections you want to link too.

The section ID should correspond with the link you gave the menu items previously.

Save & Preview

Thats it you are done! You can now save and preview the page to see the result. The menu will show active state for menu items only in the frontend preview of the website. 

Read More

Leave a Reply

Your email address will not be published. Required fields are marked *