Stop floating groups from occupying the same space

Im trying to create a page specific floating menu that goes right below the header. The menu is composed of three individual buttons each inside its own floating group, The issue I’m having is that the groups float over each other, so the elements end up on top of each other in the mobile layout. I know people have had similar issues, is there a workaround?

Here is how it should look:

Here is what happens when shrunk:

I think the problem might be because you have the 3 buttons in their own floating groups. Try placing them in one floating group. Difficult to see without a link to the app