How to Create One-Page Navigation Menu in Divi

Updated: September 23, 2021

Some websites consist only of one page, the homepage. Usually, this type of website has a long homepage. To make it easier for your visitors to jump between sections on the homepage, you can create a navigation menu just like regular websites (websites that consist of several pages). How to create a navigation menu when your website consists of only one page? This article will show you how. Specifically, we will show you how to create a one-page navigation menu in Divi.

Divi, as you have known, comes with a built-in page builder that you can use to create the homepage of your website. When creating the homepage using Divi Builder, you can add sections to place the modules. Regarding one-page navigation menu, you can point each menu item to the sections of your homepage. For instance, say your homepage consists of the following sections:

  • Hero
  • Services
  • About
  • Contact

When you click the Home menu item, you will be taken to the hero section, when you click the Services menu item, you will be taken to the services section, and so on. Take a look at the following screencast.

How to Create One-Page Navigation Menu in Divi

First, edit the page you want to apply the one-page navigation to using Divi Builder. Select a section (e.g., the hero section) and click the blue gear icon to open the section settings panel. You can also use Layers View to ease your job.

Once the section settings panel opens, go to the Advanced tab and open the CSS ID & Classes block. Add CSS id on the CSS ID field.

Move to other sections and repeat the steps above to add the CSS id to each section.

Once done adding the CSS id on each section, update your page to save the changes. Next, go to the menu manager (Appearance -> Menus). Select a menu you want to use for the navigation menu (or create a new one). Add a custom link to each menu item. Instead of adding a link, you can add a CSS id on the URL field of the menu item.

Make sure to click the Save Menu button on the bottom-right corner to save the changes.

Using the Menu

Once done with all steps above, the last step is to use the menu. If you want to use the menu on the default header of Divi, you can go to the theme customizer (Appearance -> Customize). Open the Menus block and select the menu you have edited above and tick the PRIMARY MENU option.

If you want to create a custom header using the theme builder feature of Divi, you can use the Menu module to add the menu. You read our previous article to learn how to create a custom header in Divi.

The Bottom Line

Navigation menu is a crucial feature of a website. Even if your website consists of only one page, you still need it. Divi is a feature-rich theme. Creating a navigation menu for your one-page website is not a problem in Divi. Some Divi child themes, such as Portfolio Divi Child Theme, are also designed with a one-page website concept.

Original posted on: September 23, 2021

This page may contain affiliate links, which help support WP Pagebuilders.

Leave a Reply

Your email address will not be published. Required fields are marked *

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Support Us

Consider subscribing to help us grow. Get the regular articles about page builder plugins and WordPress in general.