I know I can achieve this by having the sub-menu not be a child of the nav bar but that means I have to individually add the sub-menu to every single page which is not efficient design.
The issue arises from the fact that my nav bar is 70px tall but obviously the sub-menu will partially exist outside of the perimeter. I have set it up in the editor as above and when I go to preview it, I get this strange behaviour of the just the background of the nav bar shrinking to roughly 1/3 the original height but all the buttons stay where they’re supposed to:
When I click on the down arrow to reveal the sub-menu, the nav bar returns to the way it is supposed to look.
I originally assumed this odd behaviour was a result of the fact that bubble doesn’t like the element outside of the bounds of the nav bar but I played with the y coordinate of the sub-menu and found that it can be outside of the bounds but not past a certain, seemingly arbitrary threshold:
When that dimension “x” is 9px or less, everything works fine, but when it is 10px or greater, it produces the weird behaviour.
I am not married to doing this in the manner in which I have described. If someone has a better way of achieving the sub-menu feature of a reusable element nav bar then I am all ears.
HI mmahrif. Thanks for your thought. I should have been more specific in my original post. That little box (“Admin, Account, logout”) is a regular group currently
Hi Mmahrif.
So I am dumb. I just tried it with a focus group (obviously you assumed I would have used that as that is the obvious thing to try but I didn’t) and it works perfectly.
Brain fart.
Thanks for your help.
Anytime! I prefer groups as they are just easier to work with. Some bug currently causes it to always move away from the focus element.
Groups focus works great when using an edit icon in a group but for header menus it’s just plain annoying if you have multiple dropdowns. I did notice that @jameore of buildcamp use it in one of his menus so that was a yes for me to continue doing so.
Last question. In the gif showing the menu you built, how do you pin regular groups to elements? Obviously group focus does that but not sure how its done with regular groups. Are you just putting groups inside of groups? Like this:
Where all rectangles are groups and then the submenu item group is set to collapse when hidden?
Yep. Sort of. It’s all math here. If I want the header at max width of 960px I have the option to set 4 groups with a min width of 240px with a right margin of 20px.
That is 220px + 20px times 4.
So the submenu groups have the same min width as the top menu item group (actually a text element of the same width).
So when I don’t want to show a group I just hide it without collapsing it. This way it won’t cause the remaining groups to fill the empty space that would otherwise be created.
