Help Replicating Menu Appearance Interaction

Design help Animations & Interactions
1

Hey Friends,
I’m trying to get a secondary “sticky” menu to drop-in after hero scrolls out of view on this site. I managed to do on this on a previous site I built, using legacy interactions: crewbooks.webflow.io … but of course I now can’t figure out how I did it! :man_facepalming:t2: Please help me out if you can

Here’s the share link of that old one in case you can see what hidden voodoo I had applied…
https://preview.webflow.com/preview/crewbooks?utm_medium=preview_link&utm_source=designer&utm_content=crewbooks&preview=93b72d5a97eb3a6912344cce7989a890&mode=preview

Here is my public share link: LINK
(how to access public share link)

2

Hey there!

Can you share your current project’s share link?

In general, here’s what you’ll want to do:

Select your main hero container (I don’t know what it’s called since I can’t see the site you’re trying to do this on). Create and interaction for this container for when scrolled into view. Then on the interaction details, move the the secondary nav up 100% when the main hero container is scrolled into view. Then set the secondary nav to move back to 0% when the main hero container is scrolled out of view.

If you share your link, I can help more, just tag me. But in general, that’s what you need to do.

Hope it helps a little if you want to try that out before sharing the link.

3

@myonke hey man, thanks for helping me out! Hmmm… I don’t see where I can set triggers based on a class coming in or out of view

https://preview.webflow.com/preview/sellstory?utm_medium=preview_link&utm_source=designer&utm_content=sellstory&preview=dcbee37352aaeb76f15c9869606b1e0b&mode=preview

4

@TJwebflow Hope this helps man, lmk if you have more questions after watching:

https://www.loom.com/share/1e83f6402be442408d5c84c6ae16af13

5

Ok @myonke I got it working on my home page thanks to your supreme generosity & mad skills! However, I can’t seem to understand how I’d get it to work on my other pages. You see, I’ve added a class tag to the hero sections of each, because the hero images require some custom tinkering with the grid in different screen sizes so as not to block the eyes of the photo subject. See page ‘Subscribe’ to understand what I’m talking about. There I’ve added the class tag ‘subscribe’; and it doesn’t seem to be working. Any additional help would be GREATLY appreciated if you’re able!

6

Hey @TJwebflow - I see the secondary menu working on the published version but not in your designer in preview mode. If you can get that back to working in the designer from my previous video, then I can jump in and record a video to show you how to add that interaction to other pages. Just let me know!

7

Ok, for now I just used the animation pre-sets which you had guided me to create. That seems to have it working for me ok :slight_smile: Thanks again @myonke I really appreciate it man!