UberMenu menu not responding in mobile

Support
#1

So I’m using UberMenu in widget areas for secondary menus on some pages of my site. It is working and looking great on desktop, but when I go to mobile, I can click the hamburger menu and open it up the menu, but then when I try to tap any of the links they are unresponsive. They behave like regular text. Any idea how to fix this? Here is a page you can test it out. Be sure to try on a mobile phone. (I have an LG G6 Android and use chrome.)

http://109.73.236.145/~templebi/men/

#2

Hello There,

Thanks for writing in! To resolve your issue, please edit your page back in Cornerstone and insert the following custom css in the settings tab, Settings > Custom CSS

.x-bar-widget-area,
.widget.ubermenu_navigation_widget-class,
.ubermenu, .ubermenu-nav {
    height: auto !important;
    min-height: 200px;
}

Hope this helps. Please let us know how it goes.

#3

Thanks for your response. I see how you got it working; my only problem is I don’t like how it adds those 200px when the menu is still closed. All the content gets pushed down and the gap looks bad. Is there any way to hide those 200px when the hamburger menu is still closed?

#4

Hi There,

Please remove the previous CSS and add this custom CSS instead:

#x-section-1 > div > div.x-column.x-sm.x-3-4 {
    clear: both;
}

Let us know how it goes!

#5

I think it’s working on that page, but not on others. Is there something a bit more global that would work for additional uber menus with the same problem?

#6

Hi There,

Please remove previous CSS.
On the column where Ubermenu is added, on the Customize Tab > Class field > Add ubermenu-col.
Then add the following CSS instead on Theme Options > Global CSS

.ubermenu-col {
    clear: both;
}
  • Make sure to add the class on all columns where Ubermenu is added.
  • I can see you have added previous CSS on wp custom CSS(* added by wordpress for custom CSS). Please add it instead on: Theme Options > Global CSS(*added by X/Pro theme for custom CSS). Global means the CSS will work on all pages as long as class ubermenu-col is added.

It is not working on other pages because the new pages are using version 2 element containers wherein section ID is not automatic. On classic section, by default, first section has #x-section-1 and so on and so forth. See below comparison:

Hope this helps.

#7

Hmmm… still having trouble. Why are some columns classic and others not? Should I redo some sections and make sure none of them are classic elements?

Is there another menu plugin like ubermenus I could use without all the hassle? I just need a hamburger menu that works. Thanks!

#8

Hi There,

There’s nothing wrong with your sections. Classics section are before version 2 elements are introduce. They are supported and are still working as expected. They just work differently. Now if you will just add the class ubermenu-col on those element then add the CSS, it will work the same with this page: http://109.73.236.145/~templebi/men/

Other bundled menu plugin is superfly. But it doesn’t work the same. Your current setup is fine though. Just need to apply the class and css.

#9

Still not getting a response when I click the links. Only time they worked was with @RueNel’s suggestion, but that leaves an ugly 200px gap.

Tell me if I’m doing it correctly. The global css was put here:

And then the classic column doesn’t have a customize tab, but I scrolled down and filled in the class field:

Let me know what else I can try. Thanks!

#10

Hi there,

Since all columns are stacked together in mobile, then we can safely add this CSS. Please add this CSS as well

@media (max-width: 767px) {
.x-column.x-sm {
    clear: both;
}
}

The issue is with the column and it won’t expand since it was previously stylized with float.

Thanks!

#11

Thank you!

That media query is the answer and actually has it working on all pages it seems… even without me adding the “ubermenu-col” class to all the columns with ubermenus.

#12

One more questions since I’m a noob… I don’t have to worry about customizations in the Global CSS being erased with an update do I?

I’m using a child theme, but I don’t understand if this “global css” is within the child theme or if it is in the Pro theme in general and will be lost with an update. If you could shed some light on this for me, I’d appreciate it. Thanks!

#13

Hello There,

“I don’t have to worry about customizations in the Global CSS being erased with an update do I?”

  • No you do not have to worry because this will not be overwritten with the updates.
    The global css is saved in the database along with the theme options.

Hope this explains it briefly.

#14

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