One Page Navigation: Active Section Detection

[21cls_media]

Hello,

Our site is using a one page layout and navigation, with the navigation linking to blank spacers with assigned ids.

We’re experiencing the following issue: when scrolling through the page, there are instances when the menu/navigation item for the current section becomes inactive (unhighlighted) before the next section’s menu/navigation item becomes active (highlighted). The attached screenshot shows a browser window (on the left) with the “About” menu item highlighted. The browser window on the right shows the same page scrolled down a bit – and the “About” menu item is no longer active, but the “Services” menu item does not yet become active.

We think this sometimes happens because a blank spacer leaves the browser window before the next blank spacer lands in a position where it activates its corresponding menu item.

Is there a way to fix this issue – or possibly another way to set up a one page site and navigation so that menu items detect an entire section of content, and not just its corresponding blank spacer (and id)?

We’d appreciate any help you can provide – thanks!

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Hi,

Have you a test page setup, that is not your homepage where we can look into this.

My immediate thought is that you should have a Row for each section, then within that Row will be the section content.

Thanks,
David.

[21cls_media]

Hi David,

Thanks for getting back to us!

We have set up a test page that is laid out just like the live home page – the url of this test page is:
http://render21.com/render21-one-page-test-02022016/

Regarding the use of rows: we did try placing the content for each section in its own row, and we still had problems with the navigation sometimes not having an active item. I believe it’s because, when a section is tall enough, there are instances when none of the blank spacers with ids are present on the screen. However, maybe we did something incorrect when utilizing the rows.

So, of course, please feel free to do what you need to do in order to troubleshoot the issue.

Much appreciated!

[Mohammad – SUPPORT]

Hi,
You forgot to enable the One page navigation in Page meta options. Now its working perfect.
Thanks
Mohammd