Anyone know how to make a fixed navigation bar shrink when scrolling? I tried using interactions to set different heights on scroll, but I can’t get the objects in the nav bar (links, logo) to shrink with the navigation. Is there an easier way to do this?
1 Like
Not sure if this is exactly what you are looking for, but you can try to set the overflow for your Nav to hidden
No, I don’t think so. I want the navigation header to shrink as you scroll past the hero section. See this example: http://callmenick.com/tutorial-demos/resize-header-on-scroll/
Have you tried applying the scroll animation to affect the nav and logo elements. I would do a height adjustment on the nav and a scale on the logo.
Very interested in this as well. Following…
Hey guys, this is something I’ve been wanting to add to the demo kit for a while and finally got a chance to add it 
I made a small demo showing how to make the shrinking navigation: https://webflow.com/website/Demo-Kit
Click on the page titled “Shrinking Navigation on Scroll”
Hope this helps!
3 Likes
@thewonglv
I got in there but I can’t see what element your interaction is on. Can you give me a little guidance 
Select sns-spacer div in the tree-view.
Hi, I’m having some issues applying the animation above to the nav bar in my site. I can get the nav bar background to resize as I want, but not the elements inside the nav bar such as the logo and nav links. Any way to fix this?
Thanks.