fullwidth submenu highlight active menu element

Hi Powtin!

Ok! we will help you with this customisation :)

Please add the below code at the bottom of functions.php

//One page nav highlight
 
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('a').removeClass('active-menu-item');                    
                    menu.find('a[href="#' + jQuery(this).attr('id') + '"]').addClass('active-menu-item');
                }
            });
        });
    });
 
</script>
<?php
}
add_action('wp_head', 'activateMenuItem');

Then add the below code in Enfold > General Styling > Quick CSS

/* Your css styles for active menu item*/
.active-menu-item {
 background:gold!important;
}

Regards,
Vinay Kashyap

Hi!

Please create a temporary admin login with permission to deactivate all plugins and add custom code if necessary to help you better.

Regards,
Vinay Kashyap