Next, open up the first section of your first content area, click the Advanced tab and in the CSS ID field, add the same unique name you used in the URL field for the custom link in your menu, but this time without the #.

Then in the CSS Class field, add the class ds-section and then save the section.

Next, open the first section of your next content area and repeat the process, using the unique name for that area in the CSS ID field, but the same ds-section class in the CSS Class field.

When you are finished, the first section in each of your content areas should have a unique CSS ID (which is the same as the custom link you created in your menu, but without the #) and the same CSS Class of ds-section.

All done? Great, now it’s time for some jQuery.

Here is what we are doing:

To start, we give our first menu item the class ds-menu-active. This is much the same as your home page link on a multipage site being active when you open the site.

Next, we create a variable called scrollPos to store the current vertical position which we will use later in a calculation.

Then we say, for each element with the class ds-section, create another variable called topPos so we can target that section when it is at the top.

Now we use both of the variables we created in a calculation that says, if a section with the class ds-section is equal to, or less than 80px from the top of the page, remove the class ds-menu-active from the previously highlighted item and add the class ds-menu-active to the current item.

We need to add this code into Divi, but we need to wrap it in script tags for it to work. So copy the complete code from the toggle below and then navigate to Divi > Theme Options > Integration > Add code to the < head > of your blog and paste it in.

If you have a tall main header, for instance when using the centered header format, you may want the your links to change a little earlier. If this is the case then just increase the 80 value in the jQuery until the links change at the point you want.

Now for a little CSS.

Our jQuery applies a CSS Class of ds-menu-active to our current/active menu item, but we need to add some styles to that class to change the appearance of that menu item.

All we are doing here is applying a different colour, but you can add in any styling you wish.

We use two selector strings. The first styles menu items when using the default, centered and centered inline header formats (including vertical navigation), and the second when using the slide-in and fullscreen header formats.

Copy the CSS above and paste into your child theme stylesheet or Divi > Theme Options > Custom CSS.