Help preventing my header elements from stacking

Need help Responsiveness
1

I have been using bubble for the past week and have enjoyed it very much. After watching many videos on how to setup a good foundation for building out a responsive web app I started to build my design. I have been placing things in groups while paying close attention to my fixed width settings I have on my different elements and groups and have managed to get my page functioning for the most part how I want it.

There is one remaining thing I cant seem to solve, I have done quite a bit of research and from what I can tell I need to use a transparent shape somewhere in between my left title and magnifying glass but I have tried to place it and play around with settings and cant seem to figure this one out for the life of me.

Images as well as my app are below, any insight or help with this is greatly appreciated!
https://bubble.io/page?type=page&name=tickets&id=jetsop&tab=tabs-1

header1
header1562Ă—668 7.55 KB
header2
header2480Ă—520 6.03 KB
layout
layout1450Ă—632 34 KB

2

@fayewatson You seem very knowledgeable on this topic, I read your post here and think I am having the same problem however I can not figure out where to place the shape!

3

Hey @mike22 :slight_smile: It looks like the “Group M” element is overlapping with the other elements within the header. It might be best to place the “Group L” element within the “Group M” element, and then place transparent shape elements where the blue groups are in this screenshot:

image
image2474Ă—1184 213 KB

After adding those transparent shapes modifying their minimum width to 1% and adding hiding rules to collapse their width at certain break points should help keep the “search” and “settings” icon from breaking to the next line, but feel free to let me know if not! :slight_smile:

1 Like
4

Thank you so much for the detailed response. Will try and let you know!

1 Like