All Collections
FAQ's and Troubleshooting
Wrong active menu items color on a one-page website
Wrong active menu items color on a one-page website

When using anchor links out of the box, WordPress will mark them as active links when browsing the page that contains those elements

Eduard Ungureanu avatar
Written by Eduard Ungureanu
Updated over a week ago

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:

Did this answer your question?