Problem with Ubermenu and Pro

[thisisbbc]

Hey there,

We’ve never really had luck with the configuration of the responsive toggle menu provided by Ubermenu.

At some point we just decided to drop mobile support but this has been going for quite a bit now and we’d like to find a solution.

Because the header builder uses flexbox, Ubermenu isn’t able to properly pick-up on the bar container and it breaks the mobile menu. We’ve tried different settings, CSS tweaks, etc., but haven’t gotten anywhere so far. There’s surely a CSS snippet that can make it all work together.

A little help would be much appreciated!

Thank you

[thai]

Hi @thisisbbc,

It seems the width of sub-menu items isn’t expanded to 100%:

I recommend you to take a look at this article to config your responsive settings:

Mobile & Responsive | UberMenu 3 Knowledgebase

If it doesn’t help, please try adding this custom CSS under Theme Options > CSS:

@media (max-width: 979px){
    .ubermenu .ubermenu-nav .ubermenu-column-2-3 {
        width: 100% !important;
    }
    .ubermenu-skin-vanilla .ubermenu-submenu .ubermenu-item-header.ubermenu-has-submenu-stack > .ubermenu-target, 
    .ubermenu .ubermenu-submenu .ubermenu-submenu-type-stack {
        max-width: 100%;
    }
}

Let us know how it goes!

[thisisbbc]

Hey Thai,

Thanks for the quick reply.

Actually this is already a step forward, Chris from UberMenu was able to give me the snippet to make UberMenu compatible with the flexbox styling used in Pro.

I’ll have to improve the layout of the submenus, but before that the menu would just be floating in the air and you wouldn’t even be able to see what you’ve screenshot.

For those of you using Ubermenu+Pro w/ a responsive toggle, you might be interested by this snippet:

@media all and (max-width: 979px) {
	.x-masthead .ubermenu {position:absolute;align-self:flex-start;left:0;top:100%;}
}

Thank you for the provided snippet nonetheless!

All best,
B

[paul.r]

Hi @thisisbbc,

Thanks for sharing that code. Have a great day!