Uber menu flyout on mobile transparent

[designpursang]

Hello,
I have setup an Uber Menu in a custom Pro header.
The issue is on mobile (or actually the toggle menu), as soon as it flies out of the header and onto the main area, the menu items loose their background, so they appear to be transparent. The white text in the items shows. Background should be green and that shows ok inside the header area so I don’t think it’s a ubermenu setting.

Tried several things, but can’t work out if it’s a header, ubermenu or mobile-css setting.

[designpursang]

May have found a css solution. I have just applied this code:

@media screen and (max-width: 767px) {
.ubermenu-item-has-children.ubermenu-item-level-0, .ubermenu-item-layout-default, .ubermenu-item-layout-text_only {
background: #000 !important;
}
}

And yes that does make the item menus black.
Still let me know if there is a better solution please.

And I will then just add a question:

1. The toggle when closed rests at the bottom of the header (see first screenshot). When opened the toggle is pushed up and the first menu item starts in the header (see second screenshot). Is it possible to leave the toggle where it is and fly out the menu items below the toggle (and thus below the header?)
   

[ruenel]

Hello There,

Thanks for writing in!

To prevent the toggle from being pushed up, you must set the Flex Layout of the container to End and Start.

Screenshot

Please check your site now.

[designpursang]

OK thanks.

However not really what I am after as I want the menu sitting at the bottom of the header container. Which was perfectly achieved with Flex layout Vertical set at End.

Is there not a way to control where the fly-out menu is positioned? What makes it positioned where it is now (in relation to the toggle button)?

Or another solution would be if I can set different header for desktop and mobile. Then I can set the menu for desktop to vertical End and for mobile to Start. Would be happy with that.

[christian]

Hey @designpursang,

That is possible. You can create a different bar for desktop and another one for mobile. Then, use the Hide During Breakpoints feature to hide the bars according to screen width size.

Hope that helps.