Sticky nav bar at top of page

[JohnT]

How do i make the Floating group align in the center? It only has: Horizontally float relative to right/left which completely throws off the bar

???

[ihsanzainal84]

Hi!

Make sure fixed width is uncheck and max width is ‘inf’. You can use margins on left and right to suit your needs.

Another method is to make the floating group container layout to ‘Align to Parent’ then add a group with your UI elements in it. Just center the inner group. Also make sure to uncheck fixed width, max width is ‘inf’ and the floating group is transparent.

For both cases doesn’t matter if the floating group is left or right aligned.

[JohnT]

Yo @bubble fix this shit

you raised a $100M round with $10M in Revenue and I cant get a fixed element at the top???

[bubblealex]

I don’t see anything to fix @JohnT .

You want the floating group to fix to the top left of the screen then expand the entire width. Here’s my layout settings that work perfect for this:

---

I just realized you might want to have the floating group at the top not expand the entire width.
Then yeah you would do what I have above but this floating group would have Background set to none and you would have another group inside that is fixed width which is the group that you show to users.

Best,
Alex
dowcoaching.com

[adamhholmes]

There are several ways to do this (as has been discussed previously in the forum)…

Bear in mind CSS does not have a ‘float-centre’ property, so as pointed out already in this thread, the simplest way is just to have a full-width transparent FG at the top, then position your ‘visible element’ in the centre of that. You might need to add some cimple custom CSS to change the pointer events to ‘none’.

You can also us margin-left: auto;

Here’s another recent discussion of the same question for more details: Here’s how to center a floating group (new responsive engine) - Tips - Bubble Forum