How to disable ubermenu mobile (X:Ethos)

Support
#1

Hi there,

I set up an ubermenu on a test site and it works great on the desktop version.

It is possible to disable the ubermenu on mobile view and there is an option to do just that:

However, disabling the mobile version did NOT disable the ubermenu (UberMenu configuration > Integration).

Can you help?

#2

Hello Mbzo,

Thanks for asking. :slight_smile:

Please take a look at following tutorial on hiding menu for mobile devices:

Thanks.

#3

Thanks for your reply.
Yes, I read that text.
But that refers to hiding/disabling individual Ubermenu elements.
I tested and it successfuly HIDES a specific menu item below a responsive breakpoint. But it did not disable the menu element on mobile. That does not seem to work in this case.

What I would like to do is disable the entire Ubermenu below a responsive breakpoint (the Ubermenu default is 959 px) and replace it with the X theme’s hamburger menu.

In the Ubermenu Control Panel - Main Configuration > Integration, the “Disable UberMenu on Mobile” checkbox is ticked.

So it should work, right? Or is there something i have overlooked?

I saw a similar question asked here:


The author points out that the Ubermenu is “still active in phone view” even after marking the “Disable UberMenu on Mobile” checkbox.

Any suggestions are welcome.

#4

Hey @Mbzo,

This won’t work because the setting is only for Automatic Integration. UberMenu in X is using the API Integration.

Regretfully, this is not possible without custom development which is outside the scope of our support. I’d recommend that you use Pro for this so you can hide UberMenu on mobile and display a Navigation Inline in its place.

Thanks.

#5

Hi there, thanks for the feedback.
Yes, I was hoping to achieve something closer to PRO menus without leaving X.

How about manual integration?
There is an option to do this:
<?php ubermenu( 'main' , array( 'theme_location' => 'primary' ) ); ?>

And theme specific instructions for version 4 of X: https://sevenspark.com/docs/ubermenu-3/theme-integration/x

And maybe: https://sevenspark.com/docs/ubermenu-3/responsive/theme-conflicts

Will these instructions for X still apply?

#6

Hi @Mbzo,

You mean integrating it to the header made from Pro builder? It’s not possible too. But you can add Ubermenu shortcode to the text element instead.

Thanks!

#7

Thanks for your reply.
Is there any example to show X sub-menus behaving like PRO menus? Without upgrading to PRO, of course.
I see PRO adds a special class .x-dropdown, to the sub-menus.
Should that not be possible with X theme also?
I really want to keep the X theme for relative ease of use.

The .x-dropdown is just CSS.
.x-dropdown {
visibility: hidden;
position: absolute;
margin: 0;
padding: 0;
opacity: 0;
transform: translate3d(0, 5%, 0);
transition-delay: 0s, 0s, 0.5s;
transition-duration: 0.5s, 0.5s, 0s;
transition-property: opacity, transform, visibility;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
pointer-events: none;
z-index: 9999;
}

#8

Hi again,

The class you mentioned x-dropdown is designed specifically for Pro. X sub menu behaves differently and in order to make the X menu similar to Pro, a lot of custom development is required and not only a x-dropdown class. You can look out for other options like Superfly menu https://theme.co/apex/forum/t/extension-superfly/73 if you want to keep X. You can checkout the demos here http://superfly.looks-awesome.com/?demo=3

Hope this helps!

#9

Many thanks for your help.
Superfly looks promising. Will take a look.
cheers,

#10

You’re welcome.

#11

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