Having trouble making a button for a floating sidebar menu

I have a floating sidebar menu that has a conditional to collapse when the page is less than 600.

The problem is that I would like to have a button that shows up on my navbar menu when this menu disappears so that the user could click the button and navigate somewhere.

How do I setup a button for this and how to I make the sidebar menu collapse again after the user clicks on which place they would like to navigate?

Here is my app if anyone wants to look at it for reference: Small-flock3 | Bubble Editor

Hey, make a condition on the button- when floating group is not visible
This button is viable.

I can’t figure out a way to make a button that centers in the screen and is at the top of it. A floating button is always on the right or the left of the screen not in the center?

Just use a floating group with no max width - then put the button in the the centre of that.

1 Like

Thanks but when I do this, I am not able to click on any elements in my nav bar as the group is on top of it. Any ideas to work with this?

You can use the following CSS to solve that…

pointer-events:none will make the transparent floating group not react to pointer events (i.e. you’ll be able to click elements behind it). note: that will also make all elements inside the floating group unclickable.

So you’ll need to add pointer-events:auto to any elements inside the floating group that still need to be clickable.

Here’s some more info about the pointer-events CSS property if you need it
CSS pointer-events property (w3schools.com)

Alternatively you can just use some CSS that will make the floating group itself apear in the centre (but not in the editor).

Here’s a recent post discussing the options:

Here’s how to center a floating group (new responsive engine) - Tips - Bubble Forum

It seems to be working by making the width and height of the floating group to zero, the button then stays in the middle and I can click all the elements behind it.

Do you see any issues with this?

When I click the button my sidebar menu displays, however the button disappears and the menu won’t retract after a link is clicked on it.

It also looks like this:

Any idea how to fix this?

No idea (without knowing what you’re doing)…

But obviously you’re not hiding it correctly - so check your workflows and conditions - then, if it’s still not working as expected, check the debugger to see what’s going on

The menu has a conditional to retract when the screen size is less than 600. However, once it is expanded again by clicking the button, it does not retract again on its own.

I only have the one conditional.