Active submenu highlight

Hey Simon,

Thanks for contacting us!

Could you please try adding the code under JS into the bottom of Functions.php file in Appearance > Editor

// Highlight one page nav

function activateMenuItem(){
?>
<script>
     jQuery(document).scroll(function() {      
     var sections = jQuery('.avia-section'),
         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 - 300,
                    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');

If that does not help, please create temporary admin logins, post them here privately and point out the page you are working on so we can look into it :)

Best regards,
Yigit

Hi,

Thank you for the update.

The script is not working properly because you are not using the color section element. You have to use the color section to divide the content and specify the section name in the Advanced > Developer Settings > Custom ID field.

If you do not want to change layout or use color sections, try to look for this line in the script..

var sections = jQuery('.avia-section'),

.. and replace it with:

var sections = jQuery('.iconbox'),

Best regards,
Ismael

Hi,
Glad to hear that you have this sorted out, 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