Single page menu – indicator at wrong positions

Hey Ralph,

Thanks for contacting us and sorry for the late reply!

I see that you have given the ID to column element in Sessions section. Please edit your Color Section element and give the ID to it instead. The same applies for “Venues” and “Join” sections as well. That should help :)

Best regards,
Yigit

Hi,

Have you figured it out already because currently it highlights correct section on my end. I attached screenshots in private content field below :)

Best regards,
Yigit

Hi,

What is your screensize and are you seeing the issue on all 3 browsers? I would say it is cache related but if you are seeing the issue on all browsers then it might be related to your screen size I believe :)

Best regards,
Yigit

Hi,
Sorry for the very late reply and thanks for the links. Please check the map image in the #venue section, it is not showing because the background image URL is not correct, also please disable any lazy loading, I believe the image heights are not applied until the images are viewed so when jumping to the anchor the image heights seem to be changing the section heights.

Best regards,
Mike

Hi,
Sorry for the late reply, I find that the OpenStreetMap image is not showing for me, I only see an empty box, do you have any lazy loading plugins, or any caching or minifying plugins with a lazy loading option? Since the box seems to be holding it’s height without the image showing for me, this is probably not the cause I first thought it was.
I also found that if you go to #join (tickets) and then #venue, back and forth, the highlighting seems fine until you go to #hotel, or if you go to #hotel first.
Do you have sections with the same ID for different widths? Such as one #venue for mobile and one for desktop, thus having two sections with the same ID?
Can I login with an admin login and investigate further? Is this a “live” site, can I test some changes, deactivate plugins & scripts, if I restore them back?

Best regards,
Mike

Hi,

Thank you for the info.

As Mike observed, it seems to be an issue with the lazy loading, so we disabled WP Rocket’s lazy loading option to make sure that the the images are automatically loaded and that the height of the section are properly calculated. Please remove the browser cache or do a hard refresh before testing the page again.

Best regards,
Ismael

Hi,
Sorry for the late reply, I tried setting min heights for the color sections that contain plugin shortcodes, without success.
I note the menu highlighting seems fine until “Venue” and then all menu items after are offset by one.
I also see that you are getting an error in the browser console because your child theme functions.php is pointing to a file avia-snippet-sticky-header.js that doesn’t exist with this:

add_action( 'wp_enqueue_scripts', 'wp_change_sticky_header_script', 100 );
function wp_change_sticky_header_script() {
   wp_deregister_script( 'avia-sticky-header' );
   wp_enqueue_script( 'avia-sticky-header-child', get_stylesheet_directory_uri().'/js/avia-snippet-sticky-header.js', array('avia-default'), $vn, true);
}


add_filter('avia_load_shortcodes', 'avia_include_shortcode_template', 15, 1);
function avia_include_shortcode_template($paths){
  $template_url = get_stylesheet_directory();
      array_unshift($paths, $template_url.'/shortcodes/');
  return $paths;
}

I commented this out as you don’t have a child theme /shortcodes/ directory, nor an /js/ directory.
Then I added this code as a workaround:

function custom_script() { ?>
    <script>
(function($){
  $(document).ready(function(){
  	$.fn.isInViewport = function () {
    let elementTop = $(this).offset().top;
    let elementBottom = elementTop + $(this).height();

    let viewportTop = $(window).scrollTop();
    let viewportBottom = viewportTop + $(window).height();

    return elementBottom > viewportTop && elementTop < viewportBottom;
};
  $(window).scroll(function () {
    if ($('#venue').isInViewport()) {
    	$('li#menu-item-138').addClass("current-menu-item");
    	$('li#menu-item-139').removeClass("current-menu-item");
    } else {
    	$('li#menu-item-138').removeClass("current-menu-item");
        
    }
    if ($('#hotel').isInViewport()) {
    	$('li#menu-item-139').addClass("current-menu-item");
    	$('li#menu-item-138').removeClass("current-menu-item");
    	$('li#menu-item-140').removeClass("current-menu-item");
    } else {
    	$('li#menu-item-139').removeClass("current-menu-item");
        
    }
    if ($('#team').isInViewport()) {
    	$('li#menu-item-140').addClass("current-menu-item");
    	$('li#menu-item-139').removeClass("current-menu-item");
    	$('li#menu-item-141').removeClass("current-menu-item");
    } else {
    	$('li#menu-item-140').removeClass("current-menu-item");
        
    }
    if ($('#sponsors').isInViewport()) {
    	$('li#menu-item-141').addClass("current-menu-item");
    	$('li#menu-item-140').removeClass("current-menu-item");
    } else {
    	$('li#menu-item-141').removeClass("current-menu-item");
        
    }
});
});
})(jQuery);
</script>
    <?php
}
add_action('wp_footer', 'custom_script');

This seems to be working well for desktop, please clear your browser cache and check.

Best regards,
Mike

Hi,

Glad to know that the custom script is working. Yes, it does set the current-menu-item class name to the appropriate menu item manually when the corresponding section is in viewport.

Best regards,
Ismael