Accordions in mobile menu

[marxfoods]

I’m using Ubermenu with themeco Pro

I’ve created an Ubermenu, but I was hoping for different functionality in the mobile menu. Here is a design of what I want vs what I currently have. Basically having accordions for items in the tabbed group as opposed to having them all opened at once. Is this something that can be achieved with ubermenu or with a combination of ubermenu & Pro’s header builder? Any help would be appreciated. I’d supply a link, but site is only locally hosted.

Thanks!

[paul.r]

Hi,

I check and it seems you have already figured it out?

I can see your sub menus are no longer opened all at once.

For future reference kindly refer to the link below

Submenu Settings & Configuration | UberMenu 3 Knowledgebase

Thanks

[marxfoods]

Hi Paul,

No, that is for a different site. Here is my question again:

I’m using Ubermenu with themeco Pro

I’ve created an Ubermenu, but I was hoping for different functionality in the mobile menu. Here is a design of what I want vs what I currently have. Basically having accordions for items in the tabbed group as opposed to having them all opened at once. Is this something that can be achieved with ubermenu or with a combination of ubermenu & Pro’s header builder? Any help would be appreciated. I’d supply a link, but site is only locally hosted.

Thank you

[ruenel]

Hello There,

Thank you for the clarifications. The ubermenu mobile menu format can be styled in Appearance > UberMenu > Main UberMenu Configuration > Style Customizations. Regretfully you can only change the colors and styles. You will still have the same functionality and no accordion like structure.

Since you are using Pro, you can display Ubermenu for the desktop and make use of the navigation dropdown or navigation collapse element in smaller screens. You can hide or show the elements by implementing the “Hide During Breakpoint” option. To know more about this option, please check this out: https://theme.co/apex/forum/t/hide-during-breakpoint-explained/17378

Hope this helps.

[marxfoods]

Thanks for the reply. Unfortunately that doesn’t seem to work because I need the uber menu to be global on desktop/large screens and then the native menu to be global on mobile/small screens.

When I use the header feature on Pro and set it to small screens only / global it doesn’t show any menu on med & larger screens. Is there any way to put a content area in .x-navbar and place a “content area off screen” element in there?

[friech]

Hi There,

Please configure your UberMenu breakpoints to align it with the Theme’s Hide During Breakpoints option

Custom Breakpoint | UberMenu 3 Knowledgebase

If you want to show your mobile menu on extra small to small (767px and below) only then set your UberMenu breakpoints to 768px.

If you want to show your mobile menu on extra small to medium (979px and below) then set your UberMenu breakpoints to 980px.

You can use this custom CSS to hide the UberMenu on certain screen width.

@media only screen and (max-width: 980px){
 #megaMenu { display: none !important; }
}

@marxfood

.x-navbar and place a “content area off screen” element in there?

That is possible but you need to modify the navbar template for that.

Hope it helps,
Cheers!

[ruenel]

Hello There,

Please update your site tunnel since it no longer exist and we cannot test your site.

Thanks.