Help with UberMenu Responsive Layout Please!

Hi, I’m setting up a WooCommerce site using X Pro and I’ve set the header up with a Global Block, as for me it’s easier that way to get it display the way I want when viewed on a mobile - I find the Header builder too complicated to use! For the menu I’m using UberMenu. I’ve got a couple of issues with it which I’m hoping you’ll be able to help me out with please!

  1. When you view the site on a screen size less than 767px, the responsive toggle kicks in and when you click on the button, it opens up the menu and pushes down the logo that’s to the left of it and the 4 icons that are to the right of it! I assume this is to do with the flex settings, which I’ve centred aligned vertically each column to display the way I want, so I have no idea how to get around this!

  2. When you click on the mobile toggle button, the menu displayed is restricted to the width of the column which doesn’t look good at all. I’ve tried looking in the documentation to see if there’s a way of doing it so it fills the width of the screen, but I can’t find anything!

I’ll put the URL in a secure note as it’s being built on a temp link.

Thanks!

Hey @core365,

The solution for both of your issues is to use the Modal display of UberMenu rather than Inline which you’re currently using. Pro Header doesn’t have an option to contain the mobile nav of UberMenu.

image

Hope that helps.

Hi @christian,

Oopsie! I didn’t see that ‘Modal’ option! I think I kept skipping past it looking for other settings to adjust!

Thank you so much for getting back so quickly and thanks for your time and help, I really appreciate it!

Thanks!

You’re very welcome, @core365.

Hi @christian,

Sorry, just one more thing! When you’re viewing the site on a mobile device and click the mobile toggle button, the screen is filled with a white background and the menu appears which is all good, apart from the ‘Close’ link which is right at the footer of the page and I wanted it closer to the last category as you don’t notice it otherwise. I know you can specify the height of the menu in the UberMenu settings for ‘Responsive Max Height (px)’, however when I’ve set it to 300px, when you hover over or click the ‘Accessories’ category, the sub menu doesn’t show properly, it gets cut off! Is there a way of doing it so it automatically resizes to accommodate for the height needed to display the sub menu?

Hope that makes sense!

Thanks!

Hello @core365,

To better assist you with your issue, kindly provide us access to your site so that we can check your settings. Please create a secure note with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role

To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

Hi @ruenel,

That would be great if you could take a look, I’ll put the admin info in a secure note.

Thanks!

Hi @core365,

The height of the Uber Menu is adjusted by the value you have given Responsive Max Height (px), I would suggest you remove the value to make the modal full width.

Or else you can try out the Mega Submenu Max Height option under Submenus, to know more on this options please go through the URL here: https://sevenspark.com/docs/ubermenu-3/settings/menu/submenus

Hope it helps.
Thanks

Hi @tristup,

If I remove the value for the ‘Responsive Max Height’, then when you view it on a mobile device, it fills the full height of the screen and the ‘Close’ link is at the very footer of the page and is easily missed. I wanted it so the height of the menu adapts to fit the height needed to display the sub menu in full correctly and then the ‘Close’ link will be nearer to the bottom of the menu. If you set it to a height, then it works on a few mobile devices and then not on others - eg if the height is set to 300 then it displays the sub menus correctly on an iPad but then doesn’t show them in full on an iPhone!

Is there a way to achieve what I’m after as I’ve tried the various options in the UberMenu Submenu and Responsive & Mobile settings.

Thanks!

Hey @core365,

It is not possible to make the Height to automatic in relation to the submenu. This would require customizing UberMenu using custom code and we can’t provide that customization as part of product support.

I’d recommend that you use the Accordion Mobile Submenu Type while keeping a Max Height so that it would be easier for your users to navigate as they’ll just have to scroll and there’d be nothing to cover while the Close button is not far from the menu items.

image

Hope that helps and thank you for understanding.

Hi @christian,

Thanks for the suggestion, but I’m not a fan of using additional scroll bars if they can be avoided!

Thanks for your time and help with this one, but I’ll just have to make do as best I can.

You’re welcome, @core365. Glad we’re able to help.

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