Responsive Header issue: Trying to get this to work

Need help Responsiveness
1

Hi,
Am having trouble with the Bubble header which I copied and altered.

I’ve added a page and header here to demonstrate:

Editor: https://bubble.io/page?type=page&name=responsive_header_issue&id=forum4&tab=tabs-1
Frontend: https://forum4.bubbleapps.io/version-test/responsive_header_issue?debug_mode=true

I just can’t get the slideable menu icon to show on the same line as the logo at 375. It keeps moving down to the bottom line. I’ve tried saying to move to upper line if group logged out hidden but that doesn’t work that way.

How do I prevent the slideable menu moving out of the first row?

@DaveA has previously suggested “use spacer elements with minimum width set to zero, and all elements referenced to the element on the left.” The instructions for how to do this are apparently in the responsive video but I can’t see anything in the video about spacer elements (?groups) or group focus.

At this stage just trying to understand how to get it to work at 375 before I attempt to make it work at 320.

2

Hi Jess :slight_smile: I’ve adjusted the header to be mostly responsive. As Dave mentioned, you can place shapes in spaces that have large margins to shrink the space (In this header, one margin is the large space between the logo and the “Group Logged Out” buttons). I placed a white shape just so you can view how it shrinks in preview mode but these can be completely transparent when live of course.

Through this method, the shape will become smaller as the page decreases in width, instead of Bubble keeping that large margin (space) constant and moving the Buttons and Slidemenu to the next line. The responsive video doesn’t mention using shapes, but in the Bubble.is example application, some shapes are used in their footer element for responsive purposes. Feel free to let me know if I can help you make any other adjustments with this!

1 Like
3

Ahhhh. So if I ever have eg. 2 elements on a row and want one fixed to the left and one fixed to the right, I have to fill up the space inbetween with a responsive element otherwise Bubble thinks I want the space in between to be treated as a margin.

Seems so simple now…:slight_smile:

Thanks!

1 Like
4

Right! :slight_smile: It’s one of the reasons some Bubblers prefer to create pages by starting with a mobile page size in the UI editor, since the spacing between elements will be small. Then you can set the alignment of the logo to fixed-left and the slide menu to fixed-right, which causes them to sort of ‘stick’ to those sides as the page expands. Same effect, just different methods!