Streaming live at 10am (PST)

Sticky nav bar height to shrink on scroll

We have a sticky nav bar that we want the height of it to shrink when we scroll down the page, and revert back to its original height as we scroll back to the top of the page.

Here’s an idea of what we have in mind:

We got the nav items to move up when we scroll down the page. The issue is that there’s a rather large gap between the hot pink underline and the bottom edge of the nav bar.

We know this is because of the 3% padding in the nav bar. We want to keep this amount of padding when the page loaded and before user starts to scroll down the page, but have this padding removed (or at least lessen) as we scroll down.

We tried setting the nav bar to move upwards while page is scrolling, and have the trigger to affect ‘selected element’, but that still moves everything up while maintaining that 3% padding.

We tried moving up the div that wraps the items in the nav bar, but that only creates an even larger gap between the items and the bottom edge of the nav bar.

Would anyone be able to help us please?

Our read-only link:

Thank you!!

I guess one quick way to do this would be to move the div that wraps the elements down.
Don’t know if there is a proper way to change padding in an animations, but tried this and it definitely solved the problem visually.