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.
