There are some websites that consist only of one page (the homepage). Even when you click an item on the navigation menu, you will be taken to another section on the same page instead of another page. The purpose of this sort of website is to make visitors get focused on your content. In addition to the content, another key component of a one-page website is the navigation menu. In Elementor, creating a one-page navigation menu is really easy to do. This post will show you how.
To give you an overview, here is the example of a one-page navigation menu.
As mentioned, it’s not a hard job to create one-page navigation like the one above in Elementor. While there are some add-ons such as Essential Addons and PowerPack that come with a widget to create one-page navigation, you can also create one without installing an add-on. The main idea is to point a menu item to a certain section of the page. To do so, you can add a CSS ID to a section you want to point to.
Let’s take an example.
Say you have a menu item called “Features” and you want your visitors to be directed to the Features section within your one-page website every time they click the “Features” menu item. First off, edit the page with Elementor and select the Features section (use Navigator to ease your job).
With the Features section selected, go to the Advanced tab on the left panel and open the Advanced block. Type the CSS ID of the section on the CSS ID field.
Repeat the steps above on other sections you want to point to with menu items.
Calling the CSS IDs
You can use any Elementor widget that has an option to add a link to call each CSS ID you have added to the sections. Simply paste the CSS ID to the link field. Add the “#” as the prefix.
If you want to use the Nav Menu widget, you can edit the menu you use. On the URL field of each menu item, type the CSS ID with the “#” as the prefix.