Forum Academy Marketplace Showcase Pricing Features

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

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?

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!)

1 Like

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

This topic was automatically closed after 70 days. New replies are no longer allowed.