In 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.
To be able to fix this, we will need to use a simple JS script that will properly add the current-menu-item class to the element that was clicked, while at the same time removing 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 () {
function menu_anchor_highlight(){
var menu_items_links = $(".nav li a, .et_mobile_menu li a");
menu_items_links.each(function () {
if ($(this).is('[href*="#"]')) {
$(this).parent().removeClass('current-menu-item current-menu-ancestor current_page_item');
$(this).on('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 current_page_item');
$(this).parent().addClass('current-menu-item current-menu-ancestor current_page_item');
})
}
})
}
setTimeout(function(){
menu_anchor_highlight();
}, 500)
});
})(jQuery);
</script>
The above script needs to be placed in the Divi ➤ Theme Options ➤ Integration tab ➤ Add code to the < head > of your blog.
The result of the above script is this:
