Keep menu-item highlighted

Hi, thanks for your reply. Unfortunately I can’t send the URL. Due to client confidentiality I’m hosting it offline. Maybe I can create a quick sample page if necessary?

When I enable “Keep the current element highlighted until the next one comes into view” it doesn’t highlight any sub-item when there is no section with anchor point within the viewport. What is the option “Highlight by next target” supposed to do?

I added one custom script for the vertical menu. Is it possible that the issue is caused by this script?:

<script type="text/javascript">
/* Collapse Vertical Menu */
  (function($){
    function collapse_vertical_menu_submenus() {
		 // keep submenu open if it has an active item
$('.sub-menu .current-menu-item').parents('.sub-menu').show();
      var $menu = $('#top-menu'),
        top_level_link = '#top-menu .menu-item-has-children > a';
      $menu.find('a').each(function() {
        $(this).off('click');
        if ( $(this).is(top_level_link) ) {
          $(this).attr('href', '#');
        }
        if ( $(this).siblings('.sub-menu').length ) {
          $(this).on('click', function(event) {
            event.preventDefault();
			  current_submenu = $(this).siblings('.sub-menu');
current_submenu_parents = current_submenu.parents('.sub-menu');
$(this).parents('#top-menu').find('.sub-menu').not(current_submenu_parents).not(current_submenu).slideUp();
            $(this).siblings('.sub-menu').slideToggle();
          });
        }
      });
    }
    $(window).load(function() {
      collapse_vertical_menu_submenus();
    });
  })(jQuery);  
</script>

I created a quick sample page with parts of the same css code I used in the other page and I’m having the same issue:

Sample Webpage

When opening Menu-item 2 and then click on Item 1: the first sub-item is highlighted.
When scrolling to the header Item 1 (2) the first sub-item is still highlighted. However, when you stop scrolling the highlight of the sub-menu item fades out.

I hope you understand what I mean?

Besides, the last submenu-item Menu-item 3 is highlighted with a delay and only when not scrolling..

Still one problem.. When I scroll up from the bottom of the page to the top of the page Item 2 keeps highlighted (instead of Item 1 when header Item 1 (2) is within the viewport.

Thanks, it works! However, the weird thing is that I copied the exact settings to the actual website, and there it still goes wrong..

The differences:
With highlighted menu-item
Actual page
<a href="/handleidingtechnicus/#inleiding" aria-current="page" data-ps2id-api="true" data-et-has-event-already="true" class="_mPS2id-h mPS2id-highlight">Inleiding</a>

Sample page
<a href="/Menu-item-2/#item-1" aria-current="page" data-ps2id-api="true" data-et-has-event-already="true" class="__mPS2id _mPS2id-h mPS2id-highlight mPS2id-highlight-first mPS2id-highlight-last">Item 1</a>

Without highlighted menu-item
Actual page
<a href="/handleidingtechnicus/#inleiding" aria-current="page" data-ps2id-api="true" data-et-has-event-already="true" class="_mPS2id-h">Inleiding</a>

Sample page
<a href="/Menu-item-2/#item-1" aria-current="page" data-ps2id-api="true" data-et-has-event-already="true" class="__mPS2id _mPS2id-h">Item 1</a>

Does this make any sense?