Floating group header alligned left but it should be centered

Need help Responsiveness
1

Hi guys,

  • Built my header as a floating group relative to the top.
  • Set at max 380px and minimum 209px
  • Rest of pages 380px width (this means advice on previous post from Jan 17 sgigoipecqueux won´t apply)
  • Header is centered when I play around with it in the Header´s responsive area
  • Header stays left when shown on the rest of pages

Bubble problem
Bubble problem1097×545 36.2 KB

How can I fix this?

1 Like
2

Is it centered on the page? On the page responsive settings, is it set to be center-aligned?

3

Header settings don´t allow any kind of alignment, but it does appear centered

imagen
imagen887×213 17 KB

4

You’re looking at the “Header” reusable element. Everytime you drag it onto a page, you have to set it’s alignment specifically for that page.

For example, go to “Index.” CClick on the responsive tab. Select the Header element. Make sure the little box for “centered” is clicked.

Also, when you’re in the UI Builder for a page, right click on the Header element and choose the “Center Horizontally” option.

6

Thanks andrew but after centering on both sides (UI & Responsive) still no progress

imagen
imagen1414×818 69.7 KB

What do you mean by " Make sure the little box for “centered” is clicked." couldn´t find that option anywhere

7

Here’s an image. My header is a Reusable Element. When I go onto my About Page and left click the Header, I get this menu. Then, I click the “center” button.

centered_reusable
centered_reusable1598×486 56 KB

8

Those options do not appear when editing Reusable Element nor the page.
imagen

1 Like
9

That’s weird! That’s how I do it in ever app I have, so I don’t know why you don’t have the option.

10

I had the exact same issue. The panel mentioned by @andrewgassen were not visible to me either. A Bubbler helped me figure this out. When creating a reusable element, make sure you do the following:

The main group should not have a max width enabled. Group everything else inside in a group (second major group on the whole item) and make it fixed width. Then Andrew’s menu will be available in responsive tab, and everything should float centre. Bubble Rules!!

11

This is the answer given by support.

  • On the page itself, for the header, uncheck ‘make this element fixed-width’
  • On the reusable element for the header, group all the elements such as the hamburger icon, title, search icon etc into a group that has ‘apply a max width’ enabled
  • this should make the floating header (which is pulled out of the responsive engine), stretch across the page with the elements within retain their original centered position.

@kenlaji will let you know if it worked ASAP

5 Likes
12

Ah, yes, this is how I have mine setup. I didn’t think about this. I never build fixed width interfaces, so this wouldn’t have stood out to me as obvious.

I do have all my headers set to have a group inside them that the elements live in, and that group has a max and min width, but the header itself is fluid.

1 Like