When someone visits your website, you want to make sure they have no problem finding what they’re looking for. And having a clear, easy-to-follow navigation menu is key. But what if you only have a one-page site? Is having a menu still necessary?

Yes! But not the traditional menu that’s on a multi-page site.

You need an anchored menu! This week’s WordPress Wednesday Tip 22: Creating Anchored Menus in Divi is going to show you how.

But first thing’s first.

What is an Anchored Menu Exactly?

An anchored menu is a menu that takes visitors to specific sections of a page, rather than to a different page on the site. Not only are they ideal for providing user-friendly navigation on a one-page site, they can also be used on a page that is particularly long so visitors don’t have to scroll through the page to find what they need.

Onward Ho!

 

WordPress Wednesday Tip 22: Creating Anchored Menus in Divi

 

1.  Using the Divi Builder, create your web page. (Need help with this step? Click here).

 

2.  For this how-to guide, we’ve created the following sample page. This page is 1 standard section, with 1 column and a text module for each of the 4 rows, but you can use any type of section, row, and modules that you like. We’re going to create menu items from each of the sections (labeled Menu Item 1, Menu Item 2, and so on). From the backend, our page looks like:

 

Wordpress wednesday tip 22: creating anchored menus in divi

 

Viewing the page from the front end, it looks like:

 

creating an anchored menu in divi
3.  Click the Settings icon in the module you want as your first menu item.

 

Wordpress wednesday tip 22: creating an anchored menu in divi

 

4.  Click on Advanced. This takes you to the module’s advanced design settings.

 

how to create an anchored menu in divi

 

5.  In the CSS ID box, name the item. Note: the name can only be lowercase letters, numbers, and hyphens. It cannot include spaces, uppercase letters, or special characters.

 

6.  Click Save & Exit.

 

Wordpress wednesday tip 22: how do i create an anchored menu in divi

 

7.  Repeat Steps 3-6 for each section you want to include on your anchor menu.

 

8.  When finished naming the CSS IDs, update the page by clicking ‘Update’.

 

how do you create an anchored menu in wordpress

 

9.  Next, click on your ‘Dashboard’.

 

10. Hover over ‘Appearance’ and click ‘Menus’. This will direct you to the main menus page.

 

Wordpress Wednesday Creating anchored menus

 

11. Click ‘Create a New Menu’.

 

adding an anchored menu to your wordpress site

 

12. Name your menu & click ‘Create Menu’

 

Wordpress Tips adding a fixed menu

 

13. On the left side of the screen, expand ‘Custom Links’. In the URL box, type the name of the first CSS ID you created with a hashtag (#) in front of it. (In our example, it would be #menu-1). Then add what you want the menu item to display as for viewers in the ‘Link Text’ box. (In our example, we are naming this ‘Menu Item 1’). Click ‘Add to Menu’.

 

WordPress Wednesday Tip 22: Creating an Anchored Menu in Divi

 

14. Note that this is now part of the menu structure. Repeat Step 13 for each of your menu items. When finished, click ‘Save Menu’.

 

WordPress Wednesday Tip 22: Creating an Anchored Menu in Divi

 

15. Next, you need to add this new menu to the page you created. Navigate back to your Dashboard. Hover over ‘Pages’ and click ‘All Pages’.

 

Repeat Step 13 for each of your menu items  Click ‘Save Menu’

 

16. Hover over the page you created for your anchored menu and click ‘Edit’. (In our example, it’s called ‘Sample Page for Anchored Menu’.)

 

adding an anchored menu to your wordpress site

 

17. We are going to add this menu above the text, but not in the Primary Menu. To do this, add a ‘Fullwidth Section’ to your page & choose the ‘Fullwidth Menu’ as the module. 

 

how do i create anchored menus

 

how to add an anchored menu to your divi site

 

18. Select the menu you created. Customize your text, background color, size, etc by using the ‘Content’, ‘Advanced’, & ‘Design’ Settings. When satisfied, click ‘Save & Exit’.

 

wordpress wednesday tip 22

 

19. Position the section where you want it to be on the page and update your page.

 

WordPress Wednesday Tip 22: Creating an Anchored Menu in Divi

 

{Here’s what our page looks like. When you click on Menu Item 1, Menu Item 2, etc, the screen scrolls to that respective section of the page.}

 

How to create an anchored menu in wordpress divi

 

You did it! You’ve created an anchored menu in your Divi site! Great Job!

 

Know someone who’s working on a WordPress site? Why not share WordPress Wednesday Tip 22: Creating Anchored Menus with them?

 

And check out some other helpful WordPress Wednesday How-Tos!

 Optimizing Posts for Search Engines with Yoast
Adding Hyperlinks to Posts and Pages
How to Edit Permalinks
Resetting Your Password
Setting Up {or Changing} Form Notifications

WordPress Wednesday Tips

Get WordPress Wednesday Tips delivered straight to your inbox!

You have Successfully Subscribed!

Pin It on Pinterest

Share This