Need Help?

Here are some good places you cant start.

Whats New?

Get updated about all the good stuff!

WooCommerce Categories - Featured Blog
elementor-vs-gutenberg
cool formkit

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

create new menu wordpress

Step 2

Setup Menu

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

wordpress menu structure

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.

add menu items

Step 4

Add Nav Menu Widget

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

add nav menu widget

Step 5

Configure Menu

Choose the new menu you created in the menu settings.

configure menu

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.

make section sticky

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.

section id

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. 

View More Related Blog Posts

Download is just a click away

Get instant access to tons of Elementor goodies, completely FREE!

Hurray!

You got FREE access to the worlds leading widgets for Elementor page builder!