Add a menu item that links to a page section
You can add a menu item whose link goes to a specific section on the same page or a section on a different page. This works anywhere you use a menu: the theme's Header settings in Customizer or the Page Builder Menu module.
Note: If the section is on the same page, there's a smooth scroll to the linked section. If the link goes to a section on a different page, there's an immediate jump to that section on the other page.
This technique involves two steps: adding a unique ID to the target section and adding a menu item with that unique ID.
Add a unique ID to the target row
Tip: You can add the ID to a module, a column, or a row, but the target tends to position best if you add the ID to the row containing the item you want to link to. Also, if the section is near the end of the page, the scrolling section may not go directly to the section with the ID. This is a property of how browsers handle links to targets.
- In Page Builder, open the section row (or column or module) that you plan to link to.
- Click the Advanced tab and scroll down to the CSS Selectors section.
- For the ID setting, add a unique value such as
ID values may only contain alphanumeric characters, hyphens, or underscores.
Tip: It's a best practice to prefix the ID value with something that helps identify it as coming from you. For example, if your business name is Best Website Designs, your ID value might be
bwd-menutarget-1. Just make sure the ID value is something different from any other ID on your site.
Add the unique ID to a menu item
- Go to Appearance > Menus and make sure the menu you want to use is displayed.
- In the left column expand the Custom links category.
- Enter the full URL of the target page that the section occurs in, followed by the pound sign and your ID. For example, if the section occurs on the page http://www.example.com/goals/, then your URL would be:
- Enter whatever link text you want your menu item to display.
- Click Add to menu.