Page elements slipping behind side bar. responsive nightmare

Questions
1

Hi all - admittedly I am new to Bubble. (about 1 month into my learning.) many thousands of thanks for any help on this -I am pulling my hair out.
I’m trying to build an app with a floating group sidebar menu (width 175) - and my main content for the page is in a group placed at X=175. (It’s actually 4 main groups with visibility set by a Page State.) -I have two stop using Bubble.io level issues. :open_mouth:

  1. I can’t figure out how to collapse the floating side bar, for mobile, and have my content groups shift left, and be selectable below the invisible floating group. (I’ve read many threads and this appears to be impossible? -what the?)
  2. The content in my x4 groups, keeps moving behind the floating group when the page size decreases. It seems like such a simple thing. The position is set to x=175 - but I can’t make it stop!
    So frustrating! - kind expert to the rescue?
    newb. (Tom Brennan)
    Screen Shot 2021-10-30 at 7.26.24 AM
    Screen Shot 2021-10-30 at 7.26.24 AM1430×698 82.8 KB

    Screen Shot 2021-10-30 at 7.26.03 AM
    Screen Shot 2021-10-30 at 7.26.03 AM1133×689 71.5 KB
2

I think this whole thread my help you out:

2 Likes
3

Hey, @ed13! I’d say be on the lookout for an announcement from Bubble (probably in the next week) about the new responsive engine. I haven’t used it yet, but my impression is this new engine will FINALLY unlock features like collapsible sidebars because it is built using the CSS Flexbox functionality. Here’s a quote from one of the founders:

4

The easiest way is putting a fixed width group behind the ffloating group, and the width of the group is same to the floating one.

Floating group is literraly “float”, so other element can be under the floating element.
To avoid this inconvinience, a Group element prevents other elements to go behind the floating element.

5

This is VERY helpful thank you! I’m in the early stages of my app, and still learning Bubble so your info is very timely. I can concentrate on developing wireframes in Figma for a week or so and dedicate my time to advancing my Bubble knowledge with the new editor!

6

Thank you - Yes I played with this and think it’s likely the best work around for issue #2.
It will be interesting the see if the new Editor removes the need for extra elements AND offers Horizontal collapse! :slight_smile:

7

I watched your excellent video series and subscribed to your channel. :slight_smile:
I’d already stumbled onto the concept of building the site/app as a single page but your explanations and “extras” make everything work so much better!
Unfortunately, with Bubbles current functionality - things don’t really collapse left.
Your framework PLUS horizontal collapse will solve all my navigation issues!
-Also -special thank you for iconify tip!!

1 Like