Highlight nav. menu item based on anchor

Hello @klaasv,

Unfortunately, this feature is not available on OceanWP theme, but you can use the custom JS to achieve that.

If I understand your request correctly, you can use the following customization.

Please put the CSS below in Customizing > Custom CSS/JS > Custom JS:

jQuery(document).ready(function () {
  'use strict';

    var menu_items_links = jQuery("#site-header-inner ul li a");
    menu_items_links.each(function () {
        if (jQuery(this).is('[href*="#"')) {
            jQuery(this).parent().removeClass('current-menu-item current_page_item');
            jQuery(this).click(function () {
                var current_index = jQuery(this).parent().index(),
                    parent_element = jQuery(this).closest('ul');
                    parent_element.find('li').not(':eq(' + current_index + ')').removeClass('current-menu-item current_page_item');
                jQuery(this).parent().addClass('current-menu-item current_page_item');
            })
        }
    });
});

Please read this link for more information about the CSS/JS code on the customizer: https://docs.oceanwp.org/article/354-add-custom-css-and-js-to-your-website.

Note: if you have any cache plugin or server cache(CDN / Browser Cache and Cookies and …), you need to clear its cache contents or disable them to see your changes. Also, don’t forget to click on the regenerate all assets file and data in Elementor > Tools(if you have Elementor).

Also, please note that since we don’t have the option to remove the active class for this, so the active class only works on the URL.

I hope that helps.
Best Regards

Hi @skalanter,

Thank you so much for responding to my question.
Unfortunately the code doesn’t seem to work.
I’m indeed using Elementor and was able to regenerate the assets file and data in Elementor. I’m not using a cache plugin (yet).

I’m looking for a simlair effect in the navigation menu like this website:
https://soophsupport.nl/
The one I’m trying to setup can be found here: https://f-ien.nl/

Again thanks for your reply and time you put into my question.

Cheers, Klaas

Hello @klaasv,

The JS code is correct, and when you click on the menu it will add a “current_page_item” class to the menu item.

Now you should set the “Current Menu Item” style. I’ve checked your website’s source page, and I didn’t see that styling on your website.

Please check this screenshot: https://i.postimg.cc/RhTfyTKt/image.png.

Best Regards