How to add menu items to scroll to sections on the same page?
Let say you have a single-page website so that the links in your navigation menu, are supposed to point to different sections on the same page.
For example something like this demo:
All you need to do is 2 simple steps:
- Assign a name as CSS ID to your section on the page
- Set that CSS ID as the URL for your menu item
For step 1, edit your page in the Elementor page builder, select your section and go to the Advanced tab. In the Advanced dropdown, set a unique name in the CSS ID field.
Then navigate the Appearance -> Menus in your dashboard and edit your navigation menu.
Add a new menu item as Custom link and in the URL field, set the unique CSS ID that you used in step 1.
Save the changes and you are good to go.
How to scroll to a section of a page, from another page?
In this case, you need to do something different. You need to use your homepage as the new menu item and by changing the " link/anchor ID" parameter, it will navigate to the target section from any page.
Open your Menus menu and add your homepage to your menu,
You may need to save the menu once and reload it again to see all the options of the menu items.
Now, change the navigation label filed as you like and finally set the ID of the target section in the last option called " Link/anchor ID"
With this method, you can navigate to any section, from any page.