How to make my reusable header which is in a floating group to shrink as the user scrolls down the page

[evatindi]

Hi,
How can i make it so that as my reusable header which is inside a floating group to shrink as a user scrolls down the page?

[gf_wolfer]

Go to the editor of the Reusable Header element.
Make the background for the Header element no fill (see through)

You will need the header elements in a group (Group Large), and then make the copy of this group but make it the small size that you want (Group Small)

The different set ups for each group:
Group Large:
Element is visible on page load (check yes)
Collapse element’s height when hidden (check yes)
Under the Conditions tab of this Group --> make a condition “When current page scrolling position > 300” make this element visible (unchecked). Meaning this group gets hidden

Group Small:
Element is visible on page load (unchecked)
Collapse this elements height on page load (check yes)
Under the Conditions tab of this Group --> make a condition “When Group Large is not visible” --> make this element visible (check yes)

Hopefully this helps!
If you want to see how some conditions operate on a header based on scrolling position, check out my free Landing Page template https://thefreelandingpage.bubbleapps.io/
(go to the link, click ‘Get Now’ on the right, on new page scroll down and add the app to your templates, then go to main Bubble page/dashboard and go to create a new app, and select this template from the template dropdowns to access it in editor mode!)

[evatindi]

Wow! Thank you,thank you,thank you! This is so helpful!