Streaming live at 10am (PST)

Shrinking a Sticky Nav


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?


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:


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 smile

I made a small demo showing how to make the shrinking navigation:
Click on the page titled "Shrinking Navigation on Scroll"

Hope this helps!


I got in there but I can't see what element your interaction is on. Can you give me a little guidance :smiley:


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?