Sidebar navigation – highlight anchor when user scrolls

Hey!

try this code in your functions.php:

add_action('wp_footer', 'wp_footer_mod');
function wp_footer_mod(){
?>
<script>
(function($){
	$('#top .widget_nav_menu li').on('click', function(event) {
        $('#top .widget_nav_menu li').each(function() {
			$(this).removeClass('current-menu-item');
		});

		$(this).addClass('current-menu-item');
	});
})(jQuery);
</script>
<?php
}

and then use this inside your Quick CSS field:

.current-menu-item a {
color: #35bdb2;
}

Cheers!
Andy

Hi,

Open js/avia.js and look for line:

$('body').avia_scrollspy({target:'.main_menu .menu li > a'});

Replace it by this:

$('body').avia_scrollspy({target:'#top .widget_nav_menu li > a'});

Regards,
Josue

• This reply was modified 8 years, 7 months ago by Josue.

I wrote it wrong, check my message again.

Hey!

As i understand you need the left menu to highlight when the page is scrolled… We would like to take a closer look at the issue please create a temporary user with ‘administrator’ role and share in private content with permission to deactivate all plugins and add custom code if necessary to help you resolve this issue.

Cheers!
Vinay

Hey!

Please review the page now the menu highlights as you scroll the page you need to add class name “avia-section” to add the #ID check the code block for edited code.

Then we added the below code in functions.php

//One page nav highlight
 
function activateMenuItem(){
?>
<script>
     jQuery(document).scroll(function() {
     var sections = jQuery('.avia-section'),
         menu   = jQuery('#menu-hardware'),        
         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');

and the below css in Enfold > general Styling > Quick CSS (at the bottom)
Edit the below CSS to change the highlight style

/* active menu item*/
.current_page_item .avia-menu-text, .active-menu-item {
  background:gold!important;
}

Cheers!
Vinay

Hi!

The execution takes place when the page is scrolled not sure if it is a browser issue that it is not triggering the scroll when you scroll fast. It is very much possible that the browsers have a limitation to trigger the number of pixels…

You can change the top 300 offset height to 200 or 100 it should still work just fine just changes the ID when the section is scrolled x pixels offset from the top.

Regards,
Vinay