Floating Group help

Need help
1

I have a header which is a reusable element, this reusuable element has the following structure.
There is a floating group and inside that there is a header, all of which is a reusable element.

In my pages I have a floating group at the top and inside that there is a reusable header element with the above structure . This is added on all the pages. Any group below this floating group has a margin which is the height of the header. If I do not do this then the groups below the header will stick to the top and the header will overlap them. To prevent this I have added the height of the header as the top margin of these groups. This is causing an issue where If there is any change in the header I have to update the top margin of the group below the header on all of my pages.

Is there a easier way to do this?

2 Likes
2

image
image685Ă—631 51.8 KB

If you set your page layout to Column and then place your floating group header above the rest of the content

  1. The header can be set to “not fixed” (just a normal group at the top).
  2. Then check “Make this element fixed to top” (instead of a floating group).
  3. The rest of your page elements will naturally stack below it with no overlap—you won’t need to manually add margins.
  4. Bubble’s responsive layout will automatically handle spacing.

I hope it works for you. Thanks

3

You don’t need to manually adjust margins on every page. Instead, you can let Bubble handle the layout by placing your reusable header inside a parent group (or using a column container with responsive spacing). This way, the content below will automatically push down, no manual margins needed.

I’ve set this up in a few projects to avoid the “update-every-page” issue, works much smoother and keeps everything consistent. If you’d like, I can walk you through how to restructure it so changes to your header don’t break your layouts.

4

Where can I set this? I am not able to find this

5

Yes, Can you share if you have any youtube video for this?

6

The “fixed to top” option is in the floating group’s property editor, right panel, under the positioning settings. It can be easy to miss if you haven’t scrolled down.

I don’t have a YouTube video for this exact setup, but I’ve set it up a bunch of times in projects. If you’d like, I can show you step by step how to structure your header so you won’t need to mess with margins again.