Streaming live at 10am (PST)

Shrinking a Sticky Nav


#1

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?


#2

Not sure if this is exactly what you are looking for, but you can try to set the overflow for your Nav to hidden


#3

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/


#4

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.


#5

Very interested in this as well. Following..


#6

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: https://webflow.com/website/Demo-Kit
Click on the page titled "Shrinking Navigation on Scroll"

Hope this helps!


#7

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


#8

Select sns-spacer div in the tree-view.


#9

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.


#10