fullwidth-sub-menu one-page menu highlight stoped working :-(

Hi Chris,

Sorry for the problem. Could you post a link to where we can see the results you are getting please? Also include admin login details in private in case we should need to access the backend of your site.

Best regards,
Rikard

Hi,
Sorry for the late reply, and thanks for the login, so I copied your two pages to my localhost to test, and applied the css & javascript from the documentation and observed the menu “active-item” class being added & removed constantly.
This seems to lead to a performance issue, as you pointed out. So I researched this and found a better working script, which I adjusted to work with the sub-menu and css.
So the css is the same:

/* Active menu styles */
#top .submenu-onepage .active-menu-item,
#top .submenu-onepage .active-menu-item a {
background: #000 !important;
color: #FFF !important;
}



#top .submenu-onepage .av-subnav-menu > li > a {
border-left-style: none !important;
border-left-width: 0px !important;
}

Try adding this script to the end of your functions.php file in Appearance > Editor:

function custom_sub_menu_highlighting_script(){
  ?>
  <script>
(function($){
// Cache selectors
var lastId,
    topMenu = $("#sub_menu1"),
    topMenuHeight = topMenu.outerHeight()+15,
    // All list items
    menuItems = topMenu.find("a"),
    // Anchors corresponding to menu items
    scrollItems = menuItems.map(function(){
      var item = $($(this).attr("href"));
      if (item.length) { return item; }
    });

// Bind click handler to menu items
// so we can get a fancy scroll animation
menuItems.click(function(e){
  var href = $(this).attr("href"),
      offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
  $('html, body').stop().animate({ 
      scrollTop: offsetTop
  }, 300);
  e.preventDefault();
});

// Bind to scroll
$(window).scroll(function(){
   // Get container scroll position
   var fromTop = $(this).scrollTop()+topMenuHeight;
   
   // Get id of current scroll item
   var cur = scrollItems.map(function(){
     if ($(this).offset().top < fromTop)
       return this;
   });
   // Get the id of the current element
   cur = cur[cur.length-1];
   var id = cur && cur.length ? cur[0].id : "";
   
   if (lastId !== id) {
       lastId = id;
       // Set/remove active class
       menuItems
         .parent().removeClass("active-menu-item")
         .end().filter("[href='#"+id+"']").parent().addClass("active-menu-item");
   }                   
});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'custom_sub_menu_highlighting_script');

In my tests this works much better and the scroll to anchor action from clicking the menu items also is much smoother, so please give this a try and if you still find a performance issue try disabling your other scripts and plugins to check for a conflict.
In the script above it looks for the ID sub_menu1 for the sub-menu here: topMenu = $("#sub_menu1")
This is the default ID for the first sub-menu on each page, so this should be fine, but if you use a custom ID for the sub-menu in the future please ensure to change this too.
I also noticed that in your child theme it looks like the other script was added twice, once in the functions.php and in menu-highlight.js, after you remove the other script please ensure the new script is only added once. I’m sure that you would, I just wanted to point that out 😉

Best regards,
Mike

Hi,
Glad we were able to help, we will close this now. Thank you for using Enfold.

For your information, you can take a look at Enfold documentation here
For any other questions or issues, feel free to start new threads in the Enfold forum and we will gladly try to help you :)

Best regards,
Mike