Group Focus not appearing in top left instead of with associated content

[langworthya]

Hi all - i’m, hitting an issue and it looks like someone has resolved this before, but I cannot resolve mine.

Basically i have been trying to build a mobile menu (which has been really annoying - there must be a better Bubble way to do this). I have 2 group focuses. One appears when the user selects the hamburger menu (it is linked to the ‘x’ icon since that is what displays when the hamburger menu is clicked based on workflow), and the other appears when “Medical” within the first focus group is clicked (also is linked to the ‘x’ icon).

However, when the hamburger menu is clicked, the first focus group is appearing in the top left corner. When Medical is clicked, the second focus group appears in the correct spot. They both are linked to the same element and have the same offset - any ideas on why this might happen?

[eliot1]

Hi, can you give more detail. What are the workflow you have when someone click the menu icon. Juste to make sure the Group Focus #1 is not bind to an element that collapse when hidden.

[langworthya]

Duh - fully meant to outline that! Thanks.

Here are screenshots of my set up. I do have the ‘x’ icon collapsing when hidden

[eliot1]

Ok got to simplify that a bit.
Only use one icon element:

• Make a conditionnal when group focus A is visible or group focus B is visible that change the icon to the “x” one
• Bind both this group focus to the unique icon element.
• You don’t have to bother with hiding a Group Focus because it disappear whenever you click outside of it.
• Instead use a “toggle” action when the unique icon is clicked

Hope this help

[langworthya]

Hi @eliot1 - so this does like 80% of what id like it to do. For the best user experience - tapping the ‘x’ icon should close the menu and change back to the hamburger menu icon. Any suggestions on how to do that?

[eliot1]

With the method describe above it should work as you want.
The toggle action works both ways:

• 1st click, it opens the menu and the icon change because of the conditionnal group focus is visible
• 2nd click, it closes the menu and the icon change back to the initial value because the group focus is not visible anymore

But I highly recommend that you use only one group focus. And use a workflow with the toggle action too, to show/hide the 2 rows of the medical section. Instead of using a second group focus.

Your Element Tree should look like this:

• Group Focus Menu
  • Group Animals
    • Text Animals
  • Group Medical
    • Text Medical
    • Group SubMedical (not visible on page load, collapse when hidden)
      • Group All Medical
        • Text All Medical
      • Group Health Checks
        • Text Health Checks
  • Group Resources
    • Text Resources

And the workflow:
When Group Medical is clicked
Toggle Group SubMedical

Hope this help

[langworthya]

You are an angel!! It works beautifully now - thank you so much!