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

Support
#1

It seems that when using one page nav, if the very last section is shorter than the height of the browser window, the top of that section can never “touch” the top of the browser window, and therefore, the menu item for that section will never be highlighted (showing that it’s the section currently looking at). Instead, the previous section will be highlighted in the header since that is the section touching the top of the browser window, even when scrolled as far down as possible.

I noticed that this somehow NOT an issue on the Theme.co/x/ homepage. The final “Buy” section is highlighted when scrolled all the way down, even though the section is not tall enough to reach the top of the browser window.

How can this be done? Thanks a lot.

#2

Hi Jesse,

Thank you for writing in, your analysis is correct so to have the same as on theme.co/x/ your footer needs to have a 2/3 height of the viewport/screen. Try adding the custom CSS below to Theme Options > CSS

.x-colophon.bottom {
	min-height: 75vh;
}

Hope it helps,
Cheers!

#3

Thanks for your reply. I understand that having a taller footer would allow the section above to reach the top of the screen; however, on the theme.co/x/ page, they’ve somehow managed to have “Buy” highlighted on the header BEFORE the section actually reaches the top of the screen. How can that be done?

Thanks again.

#4

Hello Jesse,

Theme.co/x/ site is using the scroll nav spy which also use in one page navigation in the theme. Can you please provide us the url of your site so that we can check it? I’ve check your Tekabee site and so far the nav scroll spy is working perfectly on my end.

Regards.

#5

Hi there. That is the correct site. www.tekabee.com

I apologize if I’m not explaining myself well. But what I am asking for is certainly not working on my site. Please take a look at this graphic I’ve made to try to explain more clearly:

Normally, the menu item would only be highlighted once the section TOUCHES the top of the browser window. So how was this manipulated on the Theme.co/X page?

Thank you again.

#6

Hi,

There is not enough space to trigger the highlight. Try adding a little bottom margin to the last section of your page.

Hope that helps

#7

I understand that there isn’t enough space, but my whole point is that this is also true in the screenshot I attached above. Yet, they’ve somehow managed to get the menu item to highlight DESPITE there not being enough space for the section to reach the top of the browser window. Does that make sense?

Thanks again.

#8

Hello Jesse,

I have tested the one page navigation in your site and it seems it performs well. Just a slight peak of the last section and the last menu item were already highlighted.

Hope this helps.

#9

That’s the 2nd last menu item. The little chat icon beside it is the last.

Thanks again.

#10

Hello Jesse,

Sorry I was showing the incorrect menu item.

Normally, the menu item would only be highlighted once the section TOUCHES the bottom of the navbar. In the site Theme.co/x/, the buy section is a separate section added before the footer section.

To resolve your issue, please edit your page back in Cornerstone and in the Settings > Custom JS and insert the following custom js code

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

We would loved to know if this has work for you. Thank you.

#11

Thank you for the suggestion but unfortunately it did not work. The menu item still only highlights if the section touches the bottom of the header.

#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.