π How to link Menu to Sections in Neve
Linking a Menu to a Section is helpful when it comes to navigating through long content. When you click on a menu item the page will automatically scroll to the desired section.
In order to achieve this you will have to follow some steps:
Using an anchor in the menu
Step 1:
Go to Dashboard -> Appearance, and select Menus.
Step 2:
On the left side of the opened page, there is a section called " Add menu items".
Select Custom Links.
In the URL space, add the link to the page where the section is, and be careful, at the end of the link add #name (1), where name is set to the menu anchor.
Mention a name for the link (2) and tap the Add to Menu button (3).
Step 3:
Now you should be able to see the difference, on the right side, in the Menu structure. Press the Custom Link (1) and you will notice the URL given at the previous step and the Navigation Label, same as the Link text.
Under the Navigation Label are the options for movement:
- Up one - picks up one step.
- Under Project Details - transforms it into a submenu of the Project Details.
- To the top - moves it above Home.
Adding an anchor to the page:
In order for the #name added at the end of the link to ensure the scroll, you need to put an anchor so that it exists on the page.
Fortunately, WordPress has a feature that allows us to do this, quite easily.
Step 1:
Testing each header to check if it is a section or not can be exhausting, but the Outline button provides us an organized sketch of the page:
To have a better look at how it works, tap the following link Demo Outline.
Step 2:
Choose one of the sections where you want the page to scroll (1).
Step 3:
Select the Block menu (2).
Step 4:
Tap on Advanced (3) and you will see 2 fields:
- HTML Anchor (4), where you will write the name given in the First Scenario, without "#"
- Additional CSS (5), where you will have to write the URL from the First Scenario, including the part with the hashtag.
The approach presented in this guide can be applied to any section you want, as long as itβs created with the WordPress editor.