Toolbar position in navigation's overlay is odd

[mtias]

The position of the toolbar when working with the overlay portion of a navigation menu looks random:

[jasmussen]

The way this is "fixed" in the post editor, is that the overlay menu has a higher z-index than the block toolbar, covering it, the idea being that the block toolbar isn't useful to editing content inside (the mover controls aren't right, etc). That solution breaks in the site editor, as that's iframed and creates a stacking order that doesn't allow the menu overlay to be elevated above the block toolbar.

As a longer term solution, the contents of the overlay should probably be separately customizable to the menu itself, and could potentially be edited in "template part focus mode".

As a near term solution, I wonder:

• Can we simply hide the block toolbar when this overlay is opened?
• Can we force the "top toolbar" option when this is opened?
• Perhaps a plan B if those fail, if we can attach a classname to the block toolbar when the overlay is opened, we can likely improve things from this state at least.

[jasmussen]

CC: @georgeh @vcanales @mkaz

[annezazu]

I also experienced some oddness with the UX when using the always on mobile option today that I think relates to this issue as well:

nav.block.mobile.menu.mov

From my point of view, I thought the vertical alignment was accidentally turned on and that somehow the navigation block had taken over my entire header. It wasn't quite clear how to get out of it and the scroll bar that suddenly appeared made everything feel very broken.

[jasmussen]

#36990 linked by github right above mitigates, but does not solve this one.

[mtias]

Closing as the entire overlay is due for a revision