Floating group is stuck on left side of the screen

Here’s what I’m wanting to do (finished app working on desktop view):

A sticky left navigation, similar to the new Twitter redesign. I’ve done this using a Floating Group.


However, as soon as I try and make this responsive (eg turn off Fixed Width for this page), all hell breaks loose, and the group is stuck to the left edge of the window.

I would fix this by grouping all elements on this page and adjusting from there, however a Floating Group can’t be grouped with anything else, so it’s kinda just off on its own, all lonely on the edge there.

I’ve watched all the tutorials I can find on Bubble responsiveness, but am still at a loss once a Floating Group/position: sticky is thrown into the mix.

How do I make this behave?

Link: Findyourbuilder | Bubble Editor

Thanks in advance!

I am not sure if this approach would work on a Reusable element, but I had managed to setup this on a page directly.

Here’s a post explaining my steps.

Hopefully that helps. Unfortunately, I have updated my app to not include this behaviour any more, so I don’t have a live link that I can share.

FLs are tough to deal with responsively because they have no concept of what’s going with other elements. If I have to, I usually link them to a page-level element (bumper).

If you can make a bumper at the page level behave, you can id it “bump”, id your REU as fl_left and use this code:

s = $('#bump').parent().position();
$('#fl_left').css('left' , s.left + 'px');

Don’t forget to run the inside of the function on page load.

Depending on your setup you might have to use .closest() to find the first r-box.

1 Like

@duke.severn You genius!! This is EXACTLY what I’m looking for, THANK YOU!

Okay, I have almost everything set up, JavaScript is in, IDs are in, bumper is behaving, but still no action. Am I missing something in the function? I have a hunch there might have been a key missing word in your instructions at: “Don’t forget to run the inside of the function on page load.”

This is my setup: https://bubble.io/page?type=page&name=admin-controls&id=findyourbuilder&tab=tabs-1

I’d owe you if you had a free moment to check out what last step I’m missing :innocent::pray: Thank you!

The window.resize() goes in your html headers or html element inside <scrip> tags. The inside function to run on page load is just this:

s = $('#bump').parent().position();
$('#fl_left').css('left' , s.left + 'px')

See provided example: page load function, html A (I think).

Perfect, that’s done it! THANK YOU! I can’t thank you enough for solving this so completely for me, you’ve saved me days of frustration. I owe you a drink if you’re ever in Sydney!

1 Like

Glad I could help.