Skip to main content
All CollectionsTroubleshooting and FAQsCommon Issues
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

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. 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.

(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');

}, 500)

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?