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:
https://test-ep-website.webflow.io/untitled2
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: https://preview.webflow.com/preview/test-ep-website?utm_medium=preview_link&utm_source=designer&utm_content=test-ep-website&preview=6b70dd8ea616d5c2a1b3f639eda6936f&mode=preview
Thank you!!