Responsive Design Issue - Header Menu Collapsing To Second Line

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.

Screen Shot 2021-02-28 at 12.42.52 AM Screen Shot 2021-02-28 at 12.42.42 AM Screen Shot 2021-02-28 at 12.42.36 AM

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.