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?
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.
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:
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!
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.
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!
Brilliant, problem solved! Will keep this in mind next time before the infuriation strikes haha.
Thanks for the link, super useful!