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?

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:

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 :slight_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?