Hi all,
Does anyone know why a header element will collapse like this?
The breakpoint is only 1200px before it collapses to the next line:
Please let me know if you have any suggestions
Thanks,
Reece
Hey @help,
Have you tried putting a transparent group between the product logo and button? Don’t make it fixed width, but non-fixed width. I hate this responsive editor because you need to use little weird tips and hacks to try to make stuff work lol
1 Like
Also, check in the responsive editor that your button at the right is right aligned and your logo at the left is left aligned, and of course that the main group is not set to fixed size.
2 Likes
The “best” way to handle that situations it’s to create a Shape element with transparent background and no borders between the left logo and right button and make sure it’s not fixed width as @johnny said.
1 Like
Check explain margins. @johnny guidance should fix the problem.
My understanding is that Bubble handles responsiveness horizontally. This may be why adding a middle “responsive” group in the same line eliminates the large margin between both elements and makes them “respond” more predictably.
1 Like
Thanks a lot! A Shape sorted it on the same line
Thank you adding a responsive Shape sorted it on the same line - not sure why that is needed but it worked great
1 Like
Thanks a lot!
Thank you the shape was the solution
I try to avoid unnecessary elements as much as possible. For something simple like this it is probably better to not use an unnecessary element and instead just rely on the alignment settings.
2 Likes
Thank you - I’ll take a look at that but for a fast fix the shape is fine. There are a couple of hidden groups within that navbar as well which just makes it trickier
I do the same!
This worked for me perfectly. Tried to figure it out by myself, but with this tip in responsive editor it just worked.