Dots Menu (Fullwidth submenu element) with current class

Hey Jasper_1,

Thank you for the inquiry.

You can try the following script to add an extra class to the active menu item or once the corresponding section is visible in the viewport.

// https://kriesi.at/support/topic/full-width-submenu-4/#post-1297063
// https://kriesi.at/support/topic/enfold-gaming-demo-menu-functionality-on-sub-menu/#post-1284777

Best regards,
Ismael

Hi,

We may need to login to the site. Please provide an admin account in the private field.

Best regards,
Ismael

Hi,

Thank you for the inquiry.

We modified the code a bit. All you need to do is add the anchors in this line.

const anchors = ["#top", "#barrierefrei", "#geberit", "#perma-trade"];

Best regards,
Ismael

Hi,
Thanks for the link to your site but I don’t see a Fullwidth submenu element on your homepage, is it on a different page?
I see that you linked to the Dots Menu documentation I checked a few of your pages and didn’t find this?

Best regards,
Mike

Hi,

Thank you for the update.

It was not working because the selector for the “social media” section is incorrect. We modified the code in the functions.php file a bit.

// 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) => {     
					$("#top .av-subnav-menu a").parent("li").removeClass("current-menu-item");
					let item = $("#top .av-subnav-menu a[href*=\'" + entry + "\']");

					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 = ["#home", "#klassiker", "#ice", "#spritz", "#free", "#social-media"];

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

We also added this css code in the child theme’s style.css file to differentiate the active item from the rest of the menu items.

.av-subnav-menu .current-menu-item {
    color: red;
    background: red;
}

You can adjust it as needed.

Best regards,
Ismael

Hi,
Glad Ismael could help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike