highlight active menu item on one page

Hey,
Thanks for reaching out! Are you able to post a link to your site?

Kindly,
Hannah

Hi Hannah.

Right now I am using the Page scroll to id plugin and it works fine but I would like not to use a plugin for this. If you are going to look at it to give me some other idea, I deactivate it and try what you tell me.

The code I tried is this:

jQuery(function ($) {
        $(window).scroll(function () {			
            var scrollPos = $(window).scrollTop();
            $('.nombre-seccion').each(function (i) { //each section class
                var topPos = $(this).offset().top;
                if ((topPos - scrollPos) <= 80) {
                    $('#site-navigation #primary-menu a').eq(i).addClass('item-menu-activo') //menu item highlighted class
                }
            })
        });
    });

This works but it does not highlight the menu items quite well when reaching the section and it does not highlight the last menu item (CONTACTO) becouse the last section height. I imagine there is a more “professional” way to do it.

The page is: https://custom8.nomiresatras.com/

Thank you very much.

Regards.

Hi @nachete,
Apologies for the delay! This seems to be working as it should. Were you able to resolve this? Sorry if I’m misunderstanding.

Kindly,
Hannah

Hi @hannahritner.

As I said in the previous message

Right now I am using the Page scroll to id plugin and it works fine but I would like not to use a plugin for this

Regards.

Hi,
Sorry for the delay and sorry for missing that detail. Do you have “Enable Scroll To ID” turned on from Customize > General > Performance?

Kindly,
Hannah

Hi @hannahritner.

Yes and it works fine but what I want is to scroll to each section and for that menu item to stay highlighted. By default the theme doesn’t do this and I would like to know the best way to do it without using a plugin.

Regards.

Hey,
Apologies for the delay! You can likely achieve this with some css. If you deactivate your plugin I would be happy to test out some css for you.

Kindly,
Hannah

Hi @hannahritner.

I have disabled the plugin. Tell me if you need me to create a user to be able to test

Regards.

Hey,
Sorry for the confusion in the thread. You can’t do this with css. You have to have some javascript to run the scroll spy and change classes in the menu based on where you are in the page.

While there is a feature planned for this to be added to Kadence in the future there currently isn’t any built in option for it. If you were going to build something yourself instead of using a plugin (I recommend you use a plugin unless you are comfortable as a developer) then I suggest not using jquery and instead looking at a vanilla library for it like gumshoe: https://github.com/cferdinandi/gumshoe

The exact code you need for this is unfortunately not something our support can give you, that goes beyond what we offer. However as I said I can see this making it into the theme in the future.

Ben