Shrink height of sticky nav and logo on scroll

Design help Animations & Interactions
1
  1. I would like to shrink the height of my sticky nav and logo upon scroll
  2. I would like the secondary anchor nav (see Services page) to attached to the bottom of the main nav when it shrinks

Here is my public share link: https://preview.webflow.com/preview/feather-and-nest?utm_medium=preview_link&utm_source=designer&utm_content=feather-and-nest&preview=80b95ce687f6cbe6914d00babf89ded1&pageId=5f89e444a9e9cbb0e27e029c&mode=preview

Thank you!

2

Since I didn’t mention this in our other interactions—welcome to the community!

1/2. The setup your using is going to make this a bit difficult as you’re triggering the “sticky” pretty close to where the shrink/grow would be occurring—so I’d suggest you instead adjust your layout a bit so the Hero section contains the title and the sticky menu sits just below it (instead of above).

This will allow you to trigger the shrink/grow interaction based on the Hero section scrolling in/out of view and as long as you’re using the same class this should make it easy to reuse the interaction on any of your pages across all necessary breakpoints.

I recorded a quick video to illustrate the changes and how the setup would look for the interaction:

1 Like
3

Absolutely everything I needed to know! THANK YOU!

4

Of course, and thank you so much for the donation! That was a great way to wake up this morning—much appreciated :webflow_heart:

1 Like