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.
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
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.
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.
If no CSS route as per the good suggestion by @boston85719 … you could place that reusable in both floaters
That’s an interesting approach. Did you then just change the floating group’s position for the mobile header via CSS?
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.