I am becoming infuriated at the fact that I have spent, literally, 4+ hours trying to get this fixed menu to work simply as it should. Bubble is great but when really simple things like this fail, it leaves one shaking their head.
I have created a floating group and set it to the max width of my page (2560px). Inside that floating group I have an image on the far left and a set of buttons in a group on the far right. The button group is fixed width.
If I shrink the screen even a bit, the menu breaks completely:
I have tried so many different variations of groupings (one group with the image and buttons, one group for the image, one group for the buttons, etc.). What Iâm looking for is for the logo to remain left-aligned with the same left-margin as the screen shrinks to smaller resolutions and to have the button group squeeze left as shown with the innermost, copied elements.
Any help would be very appreciated.
Hi @calvindlm 
What are the responsive settings for the logo and the group? To keep the group on the left, the responsive setting should be âfixed left marginâ and then responsive setting for the group of buttons should be âfixed right marginâ. Sometimes a transparent shape is needed in the middle as well (I know it can be confusing!) Can you share a link to the editor?
Hi Calvin,
I understand your pain. The public test app to create your issue on is here:
This will enable other Users to give you direct assistance.
Jess
Thanks for your reply. The group is set to âfixed right marginâ and I changed the logo to âfixed left marginâ which solved the problem of the logo misalignment. Iâll reiterate that the button group is set to fixed width because without fixed width, the group breaks the buttons into multiple lines:
I tried adding a transparent shape in the public editor here but it did not seem to help.
Hereâs the original replicated issue in the public editor.
Ah, I see! Iâm not sure if itâs different with large-width pages (I am on a laptop and usually have the editor size around 980) - I wasnât able to view your example in preview mode on my screen, but recreated here:
Editor:
Preview:
I also changed the alignment of the buttons within Group A to all be left aligned, and made sure none of them were overlapping as that can interfere with the responsive settings as well. Let me know if this helps!
1 Like
In addition to Fayeâs excellent solution I would then hide the full menu at about 565px and then show the slider menu for mobile so that it doesnât wrap on widths below that.
Bubbleâs responsive slider is fine but I also like to use http://howbigismybrowser.com/ so that I can just adjust and view from the browser without needing to go into the Bubble editor.
2 Likes
Thank you so much, this appears to have nearly solved my problem!
The last bit I canât quite seem to get is how to prevent the button group from hiding when the page is resized. When the page is resized to less than 958px (seen in the responsive view in the editor), the button group disappears and a new line is created. Iâve looked carefully at my version and compared it to yours but cannot see any differences.
Again, your help is very much appreciated, it has helped me regain my sanity
Awesome! 
Yes, I totally hear you it feels super counter-intuitive, but definitely gets better! Iâve spent many hours losing my sanity over it, too - if you have any other questions, feel free to let me know (Itâs always the tiniest things!)
In that example - it looks like there is an extra Group A is hiding to the very far right, inside the floating group:
Itâs technically âoff the pageâ because the page width is 980 here, and the Group A elementâs X coordinate is 2187, inside the floating group. That Group A is also left-aligned, so itâs causing the weird behavior with the floating group needing to go to the next line. You can remove this Group A by entering 0 for the X coordinate (to move it so itâs clickable) and then delete it. That should fix it!
1 Like
Brilliant, problem solved! Will keep this in mind next time before the infuriation strikes haha.
1 Like
Thanks for the link, super useful!
