Force menu link active - one page nav

[marketfresh]

I have one page navigation, but the last link - the very bottom anchor - doesn’t reach the top of the page (there’s not enough content/space below it) so that menu item never shows as active.

Is there a way to force the active state when that last link is clicked since it won’t be active naturally?

Here’s the site - you need to view on desktop to see what I mean: https://manmadecreative.com/new/

[ruenel]

Hello Jonathan,

Thanks for writing in! Regretfully there isn’t a way to activate the menu item after you click it. You must redesign the contact us section so that it will have enough space and touches the top of the browser. Once the section reaches to the top of the browser, the menu item gets activate.

Hope this make sense.

[marketfresh]

It does make sense, but not a good solution. Is this a known bug that will be addressed soon?

[paul.r]

Hi Jonathan ,

I will follow up this case with our web development team.

For a temporary fix, you can try adding this in Theme Options > JS

jQuery(function($) {
$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
       $('.x-particle.x-anchor-particle-primary').removeClass('x-active');
       $('.menu-item-62 .x-particle.x-anchor-particle-primary').addClass('x-active');
   } else if($(window).scrollTop() + $(window).height() > $(document).height() - 100){
       $('.x-particle.x-anchor-particle-primary').removeClass('x-active');
       $('.menu-item-61 .x-particle.x-anchor-particle-primary').addClass('x-active');
}else {
        $('.menu-item-62 .x-particle.x-anchor-particle-primary').removeClass('x-active');
   }
});
});

Hope that helps

[marketfresh]

@paul.r
This is almost working.
The link changes state if you manually scroll to the bottom of the page, but if you click on the Contact Us link the particle will appear and then be removed.

This is the code that I ended up with to target the correct menu items:

jQuery(function($) {
$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
       $('.x-particle.x-anchor-particle-primary').removeClass('x-active');
       $('.menu-item-151 .x-particle.x-anchor-particle-primary').addClass('x-active');
   } else if($(window).scrollTop() + $(window).height() > $(document).height() - 100){
       $('.x-particle.x-anchor-particle-primary').removeClass('x-active');
       $('.menu-item-150 .x-particle.x-anchor-particle-primary').addClass('x-active');
}else {
        $('.menu-item-151 .x-particle.x-anchor-particle-primary').removeClass('x-active');
   }
});
});

Here is the URL again: https://manmadecreative.com

[ruenel]

Hello Jonathan,

The code given by Paul is just a temporary fix and it only applies when you scroll the page. The code does not cover the click events in the menu items.

Best Regards.

[marketfresh]

Yes, but the click action causes the page to scroll, so I’m thinking it should work when the page scrolls to the bottom of the page either by manually scrolling or click scrolling.

Seems like it just needs a minor tweak to work correctly. One more look would be greatly appreciated.

Thanks!

[rad]

Hi Jonathan,

It seems there is no solution for this at this moment. The active status are triggered when the header bar touches the target section, or when the scroll animation reaches the position upon click. And since contact section is very load where it can’t be reached by scroll upon click, I recommend increasing the height of your contact us section and the footer as well. This will give room the click-scroll more spacing.

Thanks!