Streaming live at 10am (PST)

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


#1

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. https://cl.ly/0Y1d3E3w041E

Please see the preview link below.


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


#2

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


#3

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


#4

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


#5

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


#6

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