Does Bubble support changing floating group behavior when viewing on mobile?

eLPDev · March 3, 2021, 1:23pm

Greetings, everyone! I have a Floating Group that functions as a “sticky” header, but I don’t want it to remain fixed when viewing on a mobile device as it ends up consuming too much screen space. Coming from the world of WordPress and Elementor as a page builder, I would toggle to a mobile view and change the relevant settings, but I can’t figure out how to do that in Bubble.

I know I can change the Vertically Float Relative To behavior to “Nothing”, but I can’t seem to figure out how to do that based on responsive behavior.

Any ideas? Thanks in advance.

cmarchan · March 3, 2021, 2:34pm

Set up a condition that hides the current floater “when current page width < 500” and show a second floater (previously hidden) designed for mobile with the floating behavior wanted … with the same condition

eLPDev · March 3, 2021, 5:38pm

Thanks for the suggestion, @cmarchan. Unfortunately, this isn’t ideal as it means I have to maintain two separate headers. Definitely a good idea if that is the only way, but I was really hoping to use a single reusable element for this that could be “toggled” via a condition.

boston85719 · March 3, 2021, 6:56pm

I use CSS to do that.

You can add the free plugin classify and then setup the CSS in an html element to make the necessary changes.

Actually just finished with a header redesign for a client tonight that used this.

cmarchan · March 3, 2021, 7:59pm

If no CSS route as per the good suggestion by @boston85719 … you could place that reusable in both floaters

eLPDev · March 3, 2021, 9:59pm

That’s an interesting approach. Did you then just change the floating group’s position for the mobile header via CSS?

boston85719 · March 4, 2021, 9:12am

Yes…here is how it looks on my clients header

There are only 4 groupfocus elements on the page. The screen shots onlyshow three of them.

On the element themselves I use conditionals to add the class and remove the class

If you are ever interested in jumpstarting your development and specifically your responsive design development, let me know. I provide 1:1 coaching.

You can check out some of my fully responsive templates…and fully responsive on all devices and orientations.