Nav Menu – Active Item – Change Color

Hi, any support on this one? Thank you

Hello @gugax ,

Thank you for your message!

Since we cannot access your website for troubleshooting, then we need to start searching from the beggining.

The issues might be related to some plugin conflict. So please deactivate all plugins and check if it resolves your issue and after that try activating the plugins one by one to find problematic plugin. Then replace it with an alternate plugin.

To do it safely without losing any of your work, please take the following steps:
Install and activate the Health Check plugin.
Enable the TroubleShoot mode.
Enable the Neve THeme and the Elementor plugin and open the page.
Does it resolve the issue? If yes, then there is some plugin conflict or configuration error that you can check by enabling theme/plugins one by one in the troubleshooting mode.
Health Check allows troubleshooting without losing the current setup. The changes are done only temporarily until you turn off the troubleshoot mode. However, it is recommended to keep a backup.

You might want to back your website up before doing this; if you don’t already have a backup plugin, then you can use this one: https://www.ads-software.com/plugins/updraftplus/.

Since it’s a new plugin, it most likely won’t cause any additional issues.

Let us know if this solved your issue.

Hi, thanks for the answer. Couldn’t detect the issue by doing that. Meanwhile i have my website uploaded but it requires authentication. Is there any way i can share with you the password in private?

Hello @gugax ,

Thank you for your reply and apologies for the delayed response!

WP does not allow for such credentials to be displayed on the forum but you can create a one time access link using this https://onetimesecret.com/ sharing the website and the password to access the site itself, not the admin page.

This way we’ll be able to look around a bit and see if we can find the root cause or provide a quick fix.

Thank you and we’ll await your message!

Hi @mateithemeisle

Here is the link (only available during 7 days): https://onetimesecret.com/secret/420o5tozpdbdmikuy021t5ym3l4rk3d
passphrase: wp_support@2021

Please let me know if you were able to access to it, as i saw that it only allows one time access. If it was not you i would have to change my website password (it is not admin).

Thank you

• This reply was modified 3 years, 2 months ago by gugax.

Hello @gugax ,

Thank you for the credentials!

I managed to see your website but related to the first issue when I click on Boda or Novios I only have Lugar as an active menu item, not both, which makes sense since Boda and Novios are sub-sections created with Elementor inside Lugar. Lugar should stay active until the user passes that section.

However, I have understood your exact question but I’m afraid it can only be done using custom code. From what I understood, you are trying to add the on-section class (which makes the menu link active when the user scrolls to that section) on the sub-sections created with Elementor.

Here is an example of the code needed to achieve such behavior although it needs altering to behave as you wish in your current setup.

<script>
jQuery(function ($) {
    $(window).scroll(function () {
        $('nav.primary a').addClass('menu-active') //"nav a" only works if you dont have a phone layout. Better to use "nav.primary a"
        var scrollPos = $(window).scrollTop(); //current scroll position from top of document
        //console.log("START");
        //console.log("SP" + scrollPos);
        $('.menu-section').each(function (i) { //".menu-section" links to the class you gave the Item on your page.
            //console.log( index + ": " + $( this ).text() );
            var topPosi = $(this).offset().top; //topPos is the number of pixels from the top of the closest relatively positioned parent element.
            //console.log ($(this));
            //console.log("TP" + topPosi);
            //console.log("INTERMEDIATE");
                if ((topPosi - scrollPos) <= 500) { //The Number is a Treshold for the Position at which the Menu Point switches.
                    $('.menu-active').removeClass('menu-active');
                    $('nav.primary a').eq(i).addClass('menu-active');
                    //console.log("END_if_true");
                }

})
});
});
</script>

Thank you and I hope this helps!