Menu inside subregion has incorrect z-index value

I have a menu inside the top sub-region of my header. When this is viewed in mobile the actual header section has a higher z-index that the menu. This means the header section will display over the top of the menu which obviously is not supposed to happen.

Here is the video showing steps to re-create it:

What is the best way to fix this?

I tried:

.upfront-region-container-has-nav > .upfront-region-container-bg > .upfront-grid-layout {
  z-index: 10 !important;

But this will then break editing the region as the overlay has much higher z-index and the !important breaks it's rule. I imagine there are other knock on issues also.

Can I get an official CSS fix for this one please?