Enfold Gaming Demo Menu functionality on Sub Menu

Hi,

Thank you for the update.

We can use this script in the functions.php file to add a unique class name (current-menu-item) to the active item or the item that is recently clicked.

// a custom script
// add current-menu-item class to active item
function ava_custom_script_mod() {
    if ( wp_script_is( 'avia-default', 'registered' ) ) {
        wp_add_inline_script( 'avia-default', '
		(function($) {
			$("#top .av-subnav-menu > li").on("click", function() {
				var item = $(this);
				var parent = $(this).parent("#menu-sub-menu");

				if(item.is(".current-menu-item")) return;

				parent.find("li").removeClass("current-menu-item");
				item.addClass("current-menu-item");
			});
		})(jQuery);
	');
    }
 }
 add_action( 'wp_enqueue_scripts', 'ava_custom_script_mod', 9999);

Then use the same css code above to change the color of the font.

#top .av-subnav-menu > li.current-menu-item a {
    color: red !important;
}

Best regards,
Ismael

Hi,

Thank you for the update.

The script and css code above should be applied to the full sub menu items. Did you try it? You may need to purge the cache and do a hard refresh before checking the page.

Best regards,
Ismael

Hi,

Alright. Thank you for the clarification. Please remove the previous script in the functions.php file and replace it with this instead.

// a custom script
// add current-menu-item class to active item
function ava_custom_script_mod() {
    if ( wp_script_is( 'avia-default', 'registered' ) ) {
        wp_add_inline_script( 'avia-default', '
		(function($) {
			$(document).ready(function() {
				const setActive = (entry) => {     
					let item = $(<code>#top .av-subnav-menu a[href*=\'${entry}\']</code>);
		
					if(!item.attr("href").includes(entry)) return;
					
					let list = item.parent("li");
					let parent = list.parent("#menu-sub-menu");

					if(list.is(".current-menu-item")) return;

					parent.find("li").removeClass("current-menu-item");
					list.addClass("current-menu-item");
				}
				
				const createObserver = (entry) => {
					let el = document.querySelector(entry);
					
					const observer = new IntersectionObserver(function(entries) {    
						if(entries[0].isIntersecting === true) {
							setActive(entry);
						}
						
						}, { root: null, threshold:  [0.1] });

					observer.observe(el);
				}

				const anchors = ["#test", "#intro", "#about", "#reviews", "#latest", "#credits"];

				anchors.map(anchor => {
					createObserver(anchor);
				});
			});
		})(jQuery);
	');
    }
 }
 add_action( 'wp_enqueue_scripts', 'ava_custom_script_mod', 9999);

In the anchors variable or in the following line, you can define or specify the elements that you would like observe on scroll.

const anchors = ["#test", "#intro", "#about", "#reviews", "#latest", "#credits"];

For some reason, the forum converts the escape in this line.

let item = $(<code>#top .av-subnav-menu a[href*=\&#039;${entry}\&#039;]</code>);

Please make sure to replace the html entity code (&#039 ;) with the actual single quote.

Best regards,
Ismael

Hi,

Thank you for the update.

You have to remove the code tags in the following line, and replace it with double quotes. The script should work properly after. :)

let item = $(<code>#top .av-subnav-menu a[href*='${entry}']</code>);

Best regards,
Ismael

Hi,

I am sorry for the late reply!

Ismael, who is helping you with the customization, is currently on a short sabbatical leave and will return soon.

I updated Enfold to the latest version, as the version you were using had JS incompatibilities due to WordPress version however that did not help. I tried editing the code as well but unfortunately my JS skills are not as good as Ismael’s :)

Normally, we would ask users to hire a freelancer for such customizations but we like to finish what we have started. I will ping him on our Slack and ask him to check the thread as soon as he can and also ask other teammates in case they have any suggestions :)

Best regards,
Yigit