In the case you have multiple sections on the page and you use the full URL in order to link to them (e.g. http://yourwebsite.com/#section-1 instead of simply #section-1), all the menu items will show up as active, because technically the page shown is the same.

In order to be able to fix this we will need to use a simple JS script that will properly add the the current-menu-item class to the the element that was clicked, while in the same time remove at page load the default current-menu-item CSS class that WordPress adds for those menu items, in order to have it correctly adjusted only for the menu item that was clicked / linked.

<script>
(function ($) {
$(document).ready(function () {
var menu_items_links = $(".nav li a");
menu_items_links.each(function () {
if ($(this).is('[href*="#"]')) {
$(this).parent().removeClass('current-menu-item current-menu-ancestor');
$(this).click(function () {
var current_index = $(this).parent().index(),
parent_element = $(this).closest('ul');
parent_element.find('li').not(':eq(' + current_index + ')').removeClass('current-menu-item current-menu-ancestor');
$(this).parent().addClass('current-menu-item current-menu-ancestor');
})
}
})
});
})(jQuery);
</script>

The above script needs to be placed in in Divi ➤ Theme Options ➤ Integration tab ➤ Add code to the < head > of your blog.

The result of the above script is this:

Did this answer your question?