Link to Tab in Tab Section Full-Width Submenu / active submenu color

Hey Sirpa,

Thank you for using Enfold.

We would like to check the pages, but the login credentials above are invalid. Please check the info or provide another account.

Best regards,
Ismael

Hi,

Sorry for the delay.

Did you try this modification?

// https://kriesi.at/documentation/enfold/fullwidth-sub-menu/#active-submenu-highlight

The demo:

// https://kriesi.at/documentation/enfold/example-of-active-submenu-highlight/

Best regards,
Ismael

Hi,

Thank you for the update.

We added this script in the functions.php file.

function activateMenuItem(){
?>
<script>
     jQuery(document).scroll(function() {      
     var sections = jQuery('.avia-section, .av-tab-section-container'),
         menu   = jQuery('.av-submenu-container'),
         nav_height = menu.outerHeight();
         jQuery(window).on('scroll', function() {
            var cur_pos = jQuery(this).scrollTop();
            sections.each(function() {
                var top = jQuery(this).offset().top - 200,
                    bottom = top + jQuery(this).outerHeight();
	
                if (cur_pos >= top && cur_pos <= bottom) {
                    menu.find('li').removeClass('active-menu-item');                    
                    menu.find('a[href="#' + jQuery(this).attr('id') + '"]').parent('li').addClass('active-menu-item');
                }
            });
        });
    });
 
</script>
<?php
}
add_action('wp_head', 'activateMenuItem');

And this code in the style.css file.

/*—————————————-
// CSS – Fullwidth Submenu highlight active menu
//————————————–*/

/* Active menu styles */
#top .av-submenu-container .active-menu-item,
#top .av-submenu-container .active-menu-item a {
    background: blue !important;
    color: red !important;
}

#top .av-submenu-container .av-subnav-menu > li > a {
    border-left-style: none !important;
    border-left-width: 0px !important;
}

The active menu item should be highlighted when you scroll to its designated section.

Best regards,
Ismael

Hi,

It works fine on our end. Please remove the browser cache. (see private field)

We notice that a lot of the anchor links in the sub menu don’t have their corresponding color section or grid in the page. The anchors don’t work because there is no section with that anchor to go to. Is that intentional?

Best regards,
Ismael

Hi,

Thanks Sirpa. Hoping for more birthdays to come. And thanks for the clarification. We added the following script to open the appropriate tab sections whenever the corresponding sub menu item is clicked.

function ava_scroll_to_tab_section() {
?>
<script type="text/javascript">
(function($) {
	function scrollToTab(s, e,) {
		$(s).on(e, function(event) {
			var anchor, loc, cur, hash, tab, parent, pos;

			if( e == 'load' ) {
				loc  = window.location.hash;
				hash = loc;
			} else {
				loc = $(this).attr('href');
				hash = loc.substring(loc.indexOf('#'));
			}
	
			tab = $('.av-section-tab-title[href="'+ hash +'"]');
			parent = tab.parents('.av-tab-section-outer-container');
			pos = parent.offset();

			tab.trigger('click');
			
			if(hash) {
				setTimeout( function() { 
					$(window).scrollTop( pos.top - 150 )
				}, 100 );
			}
		});
	}

	$(document).ready(function() {
		scrollToTab( '#top .av-subnav-menu > li a', 'click' );
		scrollToTab( window, 'load' );	
	});
})(jQuery);
</script>
<?php
}

add_action( 'wp_footer', 'ava_scroll_to_tab_section' );

Best regards,
Ismael

Hi Sirpa,

Welcome back!

Did you add this css code in the style.css file?

#top .av-submenu-container .av-subnav-menu > li > a {
    border-left-style: none !important;
    border-left-width: 0px !important;
}

That css removes the left border of the sub menu items

Best regards,
Ismael

Hi,

Great! We’ll close the thread now. Please don’t hesitate to open a new one if you need anything else.

Have a nice day.

Best regards,
Ismael