Vertically shrink fixed top nav

Design help General
1

Hi, does anyone have a tutorial for webflow or project that they can share on how to vertically shrink a fixed top nav like this example? http://rdesousa.com/

Not sharing a link because there is nothing to troubleshoot…just asking for a shareable resource.

Best,

Nathan

Here is my site Read-Only: [LINK][1]
([how to share your site Read-Only link][2])

2

I’m looking for the exact same thing. I’ve searched the forums and found plenty about sticky nav, but I don’t understand how to shrink the navbar items - whether it’s actually shrinking their size, or adjust margin/padding, or some other method.

A tutorial or cloneable project would be so helpful here. Does anyone have an example?

Thanks,
Jason

1 Like
3

Hey @jasonferg ! Hope you’re well. :smile:

I tried to replicate the effect that the original poster talked about. You can find it here: https://matts-exceptional-project-83ace3.webflow.io/

The read-only link is: Webflow - Matt's Exceptional Project

Is this what you’re looking for? Let me know!

4

Hey @mattvaru!
That is very helpful, and pretty close to what I’m after. I’m trying to match the rdesousa.com site where the nav doesn’t start changing until the page body scrolls an equal amount.

For instance, if the nav is 100px tall, then it doesn’t start to shrink until the page has scrolled by that same amount - 100px. Then the logo itself shrinks too.

I’ll play around with this and see if I can get it.

Thanks!
Jason

5

Ah, gotcha!

The only hold-up you may encounter is that the “While page is scrolling” interaction is percentage-based and not pixel-based, so it may be a little harder to achieve what you’re trying to do at exactly 100 pixels. That said, you can get really close by playing around with it.

Also, on the note of the logo on that website, you can achieve the same effect (the logo “shrinking”) by having two versions of the logo in place within the navbar. You would set the shortened logo to have an initial state of display: none and then as the page scrolls, you could set the original logo to disappear (display: none) at a certain percentage point and set the shortened logo to display: block. This is sort of similar to what’s happening on the referenced website, but they’re using some sort of custom code to quite literally swap out the image while the page is scrolling.

Let me know if you need any assistance! :smile:

6

Hello, I am trying to achieve this effect on my page. How did you do it?