UberMenu problems on mobile

Hello. For dev1.thumbprintbooks.ca, there are two problems with UberMenu on mobile devices that I can’t resolve.

First, the name Thumbprint Books is being wrapped, even though there should be room for it on one line. I would like it to be on one line.

Second, when I click on the icon for the menu, the first three items fly up off the top of the screen.

Hey @Adams,

Here’s a screenshot of the Thumbprint Books. it is not wrapped on modern mobile screens.

It only wraps in very small screens which is reasonable.

For the second issue, please give us WP Admin access in a Secure Note so we could check your setup and see if there’s a bug in Pro.

Thanks.

Thank you. I was testing on a responsive site (http://responsivedesignchecker.com/)—but it gave different results than yours. Is there a site you use that would be better for me to use in the future?

Here is the WP Admin access

Hey There,

For your other issue, that is because for the Flex Layout of your container, you have set it to display Center which should have been Start.

I have set it to start and another occurred because you are using a text element with an ubermenu in it. Please make use of the navigation collapsed or navigation modal instead.

Hope this helps.

Hello. Thank you for finding that problem with the vertical layout. The text element was set up by your technical support person as part of integrating UberMenu with XPro (see https://theme.co/apex/forum/t/columns-in-dropdown-menu/20949/8?u=adams). When I try to add a navigation modal or navigation collapsed element I can’t find how to integrate the UberMenu with it, so I decided not to try any further. The iPhones I’ve tested the change that you made (vertical Start instead of Center) work fine. I’m not sure what other problem you observed that requires navigation collapsed or navigation modal instead of the text element with UberMenu…

Hi there,

You are good to go with the text element. The text element does have the necessary overall positioning options to fit the menu inside. The menu itself needs to be configured with UberMenu options.

Thank you.

I notice that the submenu on small mobile devices cannot be scrolled to see the rest of the menu. Is there a way to enable that scrolling?

And I notice that with the change to vertical “Start” in Flex Layout, that puts the UberMenu at the top of the desktop menu bar rather than in the center. Does that mean I’ll have to create one UberMenu for desktop with vertical Center in Flex Layout (and hide it on mobile)? And a second UberMenu for mobile with vertical Start in Flex Layout (and hide it on desktops)?

Hey @Adams,

I’ve enabled Allow Submenu Scrolling in UberMenu > Submenus but it didn’t work. Maybe this is because of caching.

Flex Layout > Start is needed so the toggle and the dropdown content won’t move up when you click the toggle. To move the toggle down a bit, you need to add a top margin to the Text element.

Having two UberMenus will be complicated. For your setup, and like what @RueNel, I’d recommend you use Navigation Inline for this.

Thanks.

I need UberMenu to display the submenu in columns on desktops (as per ticket https://theme.co/apex/forum/t/columns-in-dropdown-menu/20949/2?u=adams). In that ticket your support staff indicated that UberMenu cannot be used with Navigation Inline, so had to use a text element to integrate UberMenu.

I’ll try setting up a separate container with the XPro Navigation Collapsed element for display on mobile (i.e., the right three hide breakpoint images under customize).

That worked. I’m using UberMenu for desktop, and XPro Navigation Collapsed for mobile. Thanks for pointing me in the right direction to get menus working on the various devices.

You’re welcome. Glad you have come up with a solution. :slight_smile:

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.