One page navigation - last section won't highlight in header

Support
#12

Hi again,

Did you clear the browser’s cache after adding the code? I checked your site and it’s working fine on my end now. However you can try replacing the code with the following:

window.onscroll = function(ev) {
    var contactPosition = jQuery('#contact').offset();
    if ((window.innerHeight + window.scrollY + 130) >= contactPosition.top) {
        jQuery('#menu-item-50').removeClass('current-menu-item');
        jQuery('#menu-item-66').addClass('current-menu-item');
    }
};

You can experiment with the value 130 in the above code and see if this works for you. Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

#13

Sorry I’m being so difficult here… Yes, I did clear the cache, and I’ve now tried what you suggested but still no luck.

When you say the site is working fine on your end, I have to assume you don’t understand what I’m after.

I do understand that when sections touch the bottom of the footer, this is what causes their menu item to highlight. And in THIS regard, yes, my website is working. But I need the last section to highlight BEFORE touching the bottom of the footer, not WHEN it touches. This has clearly been accomplished on the Theme.co/X/ homepage. Otherwise, the last menu item will never highlight simply because the section is not tall enough to touch the bottom of the footer.

And again, just a reminder, the last menu item is the little chat icon, not “Pricing”.

Thanks a bunch. And again, sorry for the difficulty.

#14

Hello Jesse,

Please insert the JS code that we have suggested and do not remove it yet.

window.onscroll = function(ev) {
    var contactPosition = jQuery('#contact').offset();
    if ((window.scrollY + 600) >= contactPosition.top) {
        jQuery('#menu-item-50').removeClass('current-menu-item');
        jQuery('#menu-item-66').addClass('current-menu-item');
    }
};

Go to Settings > General and disable the Endurance Page cache.

Please get back to us so that we can check it.

#15

Done. And interestingly, this actually did it, but only when scrolling manually, not when clicking on the menu item. Do you get the same?

Getting close!

Thanks.

#16

Hi There,

I couldn’t replicate this issue on my end:

It seems to work fine when scrolling and manually clicking on the menu item as well.

Can you try on another computer?

Regards!

#17

I’ve tried on multiple computers and multiples browsers. If I click on the chat icon, it is highlighted very briefly while the page scrolls down, but once the page arrives in the correct location, the highlight jumps to Pricing.

Thanks.

#18

Hi Jesse,

I see what you mean, the only solution would be increasing the height of the last section. It’s because you can’t really scroll more than the scroll limit. And the limit is the bottom of the page where the navbar isn’t unable to reach. One page navigation is basned on ScrollSpy library so it will only mark the item active when the target section touchers or overlap with it.

Even if you force it with javascript, the ScrollSpy will still select the second to the last item since it still touches or overlaps the second to the last section.

Thanks!

#19

I have to disagree because we’ve already solved that problem via @RueNel’s suggestion. The last section WILL highlight now DESPITE not being tall enough to reach the header. That is no longer the problem.

The problem now is, it only works when scrolling to that section with the mouse, not when clicking on the menu item. On the theme.co/X/ page, the Buy section remains highlighted whether scrolling or clicking.

Thanks.

#20

Hello Jesse,

Please update the JS code and use this:

window.onscroll = function(ev) {
    var contactPosition = jQuery('#contact').offset();
    if (window.scrollY + 600 >= contactPosition.top && jQuery('#menu-item-66').hasClass('current-menu-item') == 0 ) {
        jQuery('#menu-item-50').removeClass('current-menu-item');
        jQuery('#menu-item-66').addClass('current-menu-item');
    }
};

Hope this works. Please let us know how it goes.

#21

Still no luck. :frowning_face: I click the menu item and it does highlight briefly as the page scrolls, but then “Pricing” highlights the moment the page stops moving. Do you get the same thing, @RueNel? I left the new code in.

Thank you once again.

#22

Hi Jesse,

With the implementation of the update JS code, this is what I got:

Please clear your browser or use incognito mode and test your site again.

#23

Hi @RueNel,

Thank you for putting that together. In your screen recording, the last section is actually tall enough to reach the footer, meaning your screen size or resolution must be lower that mine. If the screen resolution is high enough, it won’t work as it did in your recording. Please take a look at my own screen recording: https://we.tl/t-vAB2qJWb4Y

Thank you!

#24

Hi Jesse,

That’s right, I’m able to see the issue because I checked it on bigger screen, and the code is actually working. I didn’t said the code wasn’t working but different conditions applied (like screen size vs content size). I’ll explain how it works

  1. var contactPosition = jQuery('#contact').offset();

This gets the offset position of the contact section.

  1. if (window.scrollY + 600 >= contactPosition.top && jQuery('#menu-item-66').hasClass('current-menu-item') == 0 ) {

This check if windows scroll top overlaps with contact section offset. Which means if scroll position is less than or equal to 1700px (contact section’s offset's top position). Then it will add the current menu status, but how about the built-in ScrollLibrary that function the same? It will still select the section that is behind the navbar. I’ll provide the screenshot to explain this further.

Now based on that visual guide, to which area the navigation still belong (touch/overlaps) even though you’re already at the end of the page? It still the Pricing Area, hence, it switches back to Pricing menu item even though you click the Contact menu item.

The problem now is, it only works when scrolling to that section with the mouse, not when clicking on the menu item.

The code is intentionally for scroll and not for click action. window.onscroll = function(ev) {

My answer about this issue is still the same as I previously provided :slight_smile: , or do you just wish to make the last section full-screen so it would cover the entire area regardless of screen?

Thanks!

#25

@Rad, I appreciate your in-depth reply. If I’m understanding you correctly, you’re saying that what I’m asking for is not possible (if clicking instead of scrolling); however, how do you explain the fact that it has been accomplished on the Theme.co/X/ page? This happens even when clicking, not scrolling:

Thanks.

#26

Hi Jesse,

What my colleague is trying to say is It’s possible but the only solution to make this work is to increase the height as stated on his first answer.

Please note that theme.co/x is not considered as one of our demo page, it is custom made and is used specifically for our business purposes.

Thank you.

#27

Even if I increase the height, what if someone is using a giant computer monitor? You can never guarantee the section will be tall enough; therefore, this is not a solution. Wouldn’t you agree?

#28

Hi Jesse,

I agree, I will forward this to our web development team for review.
For the mean time please increase the height to make it work to most computer monitor.

Thanks

#29

Thanks a lot. Much appreciated.

#30

Thanks for understanding :slight_smile:

#31

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.