Linking to section of another page and keeping active state for link

Hi,

I have a link in my navbar that navigates to the PREORDER section of the home page (with ID of “preorder”. The link works fine when I’m on the home page, but stops working if I click on the link from another page, ie. the Privacy Policy page. How do I properly set this up?

I also want the correct link highlighted in the navbar depending on what section I’m in.

Desired action:

  1. When on the home page, I want the HOME link to have a box around it (current state) at all times.
    ONLY when scrolling/navigating to the PREORDER section of the home page, I want the PREORDER link in the navbar to have a box around it, and no box around the HOME link

  2. I want to maintain this functionality when navigating from another page. For example, if I visit the PRIVACY POLICY page, the PREORDER link in the navbar no longer works/navigates to the PREORDER section of the home page. I gave the PREORDER section an ID but the link doesn’t work when coming from the PRIVACY POLICY page. Image 2017-11-10 at 11.42.5...

Please see the preview link below.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hey can you insert your read-only link from the “Project Settings”.

Hi,

Thanks for taking a look. The link is also in the bottom of my original post.

https://preview.webflow.com/preview/bibky?preview=9ea94bedf09b947a8fff2552aa21456b

Ah I see what you’re talking about. I’ve added a menu for each page because of certain functionality before.

OPTION #1:

Create 3 nav menus:

  1. One for home - that scrolls to section
  2. One for Pre-Order
  3. One for Policy and add one for each page created

I know that sounds a little redundant, given that most people want 1 menu as a symbol; or 1 menu period. But this sounds like a logical work-around for your situation. It’s sort of a pain, but it doesn’t look like you’re going to have a bunch of pages.

OPTION #2:

Move that pre-order form into a hidden slide out side bar and toggle it with “Pre-Order” link, which will work on all pages.

Here’s it quick example: https://preview.webflow.com/preview/gj-project-1?preview=7f037ba6634cfabb9fb1bbea2c24860a

https://webflow.com/blog/how-to-click-to-show-hide-side-menu

http://interactions.webflow.com/

https://sab.webflow.io/designcode-like-interaction

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