Scrolling nav with show and hide interaction issue on multiple pages

Design help Animations & Interactions
1

Hi,

Im working on a site for a client that has a menu/nav functionality based on this sites nav; https://haveninc.com/

I have gotten the correct functionality working on the privacy page here (see footer for Privacy Page link). I have 2 nav elements, a stationary menu which sits in an absolute position on the page. A scrolling nav which sits hidden and is revealed and hidden by an animation triggered by an element scroll into/scroll out of view. This works fine for this page. Ideally these menus should be symbols but unfortunately interactions aren’t yet available for symbols so now my menus have to be separate unlinked elements.

While this works perfectly on the pricy page i have tried to implement on other pages eg the Security page (see footer for Security page link) but for what ever reason i cant reuse the interaction, even though its referencing the same element.

Any ideas on how to get interactions working on multiple pages??

Here is my public share link: https://preview.webflow.com/preview/gobookings-0290c6?preview=b467cc985ee8f6ce29384d79963df591

2

  1. The interaction you’ve made on the Privacy Page, do the same for the home page (after unlinking the header from symbol)

    13
    13482×1646 36.3 KB

  2. Once you’ve applied it, go the the interaction panel (above)

  3. Make sure it’s exactly the same as below. (Limit affected elements to siblings) It will now work. You’ll need to do this for each page.

    54
    54480×862 47.2 KB

The other easy way is to use the legacy interactions for the header. You can use that on symbols and get the same interaction (with the benefit of keeping the symbol)

You can use both Legacy and IX 2.0 on the same project, just not on the same elements ideally.

@webflow Is there something already easier than this so you can limit the affected elements with IX 2.0 or is this in the works?

3

Thank you so much @magicmark can’t wait to give these options a try to see which works best for the site.
@webflow Having interactions on symbols would be extremely useful for having a beautifully functioning easy to use/edit multipage website!

Cheers