Header wont center on page

Im having a hard time understanding the header responsiveness. In the responsive tab on the header, it does what I want, it stretches to 100% max and then stays centered. On the preview of the site however, the header stays on the left side of the page instead of centered. Its driving me crazy!

Here is what the preview looks like: https://practicek.bubbleapps.io/version-test?debug_mode=true

This is what Im trying to achieve: https://rentalstemplate.bubbleapps.io/version-published_template/

I think sharing your editor would be best so we can see how to help you quickly. Otherwise we are just throwing out guesses. :slight_smile:

My guess would be the alignment or possibly the element not going across the whole screen.

Not able to view the editor yet. Try this:

Didnt know about that, this is my third day playing with Bubble! Its now set to everyone can view

Try deleting the header and putting it in again, sometimes that helps. It’s a reusable element so it should be pretty easy.

1 Like

Just tried it, still not centered.

Hmm, looks better from my side, try refreshing the browser maybe. :slight_smile:

Oh, I see now. You need an empty group inbetween, or… just move the log in group all the way to the right. You almost got it! :slight_smile:

Also don’t put a max width here on the header page:

Capture

That could be an issue possibly.

Here is what im seeing. The header is the width I want, but its off to the left

When I turn off the apply max width option, it stretches the header across the whole screen, which isnt what im going for:

This is a bubble site with the header I am trying to achieve:

I would try adding groups as empty spacer on the sides and make sure the sizes are equal. Then make sure they are allowed to expand without a maximum. Maybe try that out. See if it helps. Or you can put all the items you have in another group and just make that group a max size that is centered and see if that works. There are so many ways to achieve it. Just have to find the one that you prefer.

2 Likes

What I dont get is that the group with the “check in” and “check out” forms in the middle of the page are doing what I want, and as far as I can tell I have it set up the same way.

Have you checked out this video yet? It is pretty helpful to understand responsiveness better. Def worth taking a look if you haven’t done so.

Understanding responsive settings

Ive found that the problem was being caused by this being a “floating” group. When I put it as a normal group the header stays centered. However, now the menu doesnt stay sticky to the top of the page.

Have you fixed this? Happy to take a look if you havent found a solution yet.

Nope, I want to have a floating “sticky” top menu, but I cant get the floating group to center on the page on my desktop, it either floats all the way left or right

Okay, lets get into it. Can you allow me editor access?

1 Like

I think I just figured it out. I had to make a header group that is fixed width, and place it inside of a floating group that is not. Now its doing what I am trying to make it do!

1 Like

Good solve! Give me a shout if you need any help getting settled in. Welcome to bubble!

Mike

2 Likes

Great job! Yes, putting a group inside another group is very helpful to get things to do what you want. Welcome to bubble!

2 Likes