Active anchor links in menu highlight too late when scrolling

Support
#1

Hi, I have created a page with 1-page-navigation. I’ve done this in the usual manner, by adding IDs to the different sections and creating Custom Links for my menu accordingly.

Issue one: when scrolling down the page, I would expect the relevant link to become active and change colour as I reach the corresponding section. However, this happens extremely late, in some cases the current link doesn’t become active until you’ve scrolled past the section. I need a fix for this.

Issue two: I am using a sticky menu. If I set my IDs to the actual sections, there will be a part that is hidden behind the sticky menu. I have therefore assigned IDs to small sections with a gap that matches the menu depth to allow for this. Is there a better way for me to achieve when I want without these Gap sections?

Issue three: the client wants a large logo to appear full screen on desktop and laptop. I have done this by specifying 100vh for desktop and laptop. However, that doesn’t look quite right on mobile, so for the other three breakpoints I’ve created a different bar set to 50vh. This is all fine until I try to view on mobile in landscape, in which case the logo is cut off and overlaps the text. What can I do?

I will send login details in a secure note.

Thanks.

#2

Hello @ShaunCoward,

Thanks for writing in!

You will need to add the ID to the Section element. In your case, you only added it to a Line element which may not work correctly.

Screenshot 2023-07-01 at 1.56.12 PM
Screenshot 2023-07-01 at 1.56.12 PM1726×458 102 KB

Please edit your page and make sure to add the ID on the correct Section element instead.

Kindly let us know how it goes.

#3

Hi there, thanks for the reply.

So I changed the ID to the appropriate sections but it doesn’t make any difference to when those menu links become highlighted. The menu links themselves work, for example if I click ‘The Project’ in the top menu, it bounces down to the correct section. However I would then expect ‘The Project’ to be highlighted as an active link in the menu and it’s not - in fact the menu still highlights ‘Our Team’, which is two sections before. It’s like there is something causing a delay before the links become active.

Any ideas?

#4

I also tried turning off all the Active Link settings in the inline navigation but am unable to do so. It’s weird!

#5

Also if I switch to a different menu in the inline navigation, then switch it back to the anchor links menu, it works as expected in the Cornerstone preview.

#6

Hello @ShaunCoward,

Please update your Pro theme to version 6.2.9 first. You can check out the changelog here:

This is how it looks on my end when I tested the site:
Testing One Page Nav - YouTube

Cheers.

#7

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