Skip to main content

Adding Anchor Points to Your Divi Mobile Menu

Using anchor points within your Divi Mobile menu can greatly enhance the user experience by enabling smooth navigation to specific sections of a page. This functionality is particularly useful on one-page websites or pages with lengthy content. This guide will help you set up anchor points in your Divi Mobile menu.

Step 1: Enable CSS Classes​

To start, you need to ensure that you can add custom CSS classes to your menu items.

  1. Navigate to Appearance > Menus in your WordPress dashboard to open the menu editor.
  2. In the menu editor screen, locate Screen Options at the top right corner. Click on Screen Options to expand the options available. Check the box labeled CSS Classes. This action enables an additional field in your menu item settings, allowing you to add custom CSS classes to each menu item.

Enable CSS Classes

Step 2: Add Class "anchorpoint"​

  1. In your menu structure, click on any menu item that should link to an anchor point on the same page. This will expand the menu item options. You will see a new field labeled CSS Classes (optional).
  2. In the CSS Classes (optional) field for each relevant menu item, enter anchorpoint. This class will be used to designate the menu item as an anchor point, which tells Divi Mobile to treat it specially for one-page navigation.
  3. After assigning the anchorpoint class to your desired menu items, be sure to save your menu by clicking the Save Menu button.

Add Class Anchorpoint

Testing and Final Adjustments​

After setting up your anchor points, it's important to test the functionality on your site.

  1. Test the Navigation: Visit the front end of your site and try using the mobile menu to navigate to different sections via the anchor points. Ensure that clicking these menu items takes you smoothly to the correct sections.
  2. Adjust as Needed: If you encounter any issues with navigation or if the anchor points do not seem to function as expected, double-check your menu settings and ensure that each target section on your page has the corresponding ID that matches your anchor links.

By following these steps, you will successfully add smooth-scrolling anchor points to your Divi Mobile menu, enhancing the navigation experience for users on your site, especially on more content-heavy pages.

Last updated on