highlight active menu in fullwidth submenu

Hey therzig,

The solution on this thread should work: https://kriesi.at/support/topic/fullwidth-submenu-highlight-active-menu-element/#post-577902

Best regards,
Nikko

Hi therzig,

Here is the code you can put in your 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('li.active-menu-item').toggleClass('active-menu-item');                    
                    menu.find('a[href="https://'+window.location.host+window.location.pathname+'#' + jQuery(this).attr('id') + '"]').parent("li").toggleClass('active-menu-item');
                }
            });
        });
    });
</script>
<?php
}
add_action('wp_head', 'activateMenuItem');

And the css can be any of these

.active-menu-item a * {
    color: red;
}
li.active-menu-item a, li.active-menu-item a:visited,
 li.active-menu-item a:active, li.active-menu-item a:hover,
 li.active-menu-item a:focus, #top .av-subnav-menu li a {
    text-decoration: none !important;
}
li.active-menu-item  {
    border-bottom: 1px solid #666;
}

If you need further assistance please let us know.
Best regards,
Victoria

• This reply was modified 7 years, 2 months ago by Victoria.

Hi,

Glad that Victoria helped you. Thanks for using Enfold :)

Best regards,
Nikko