Docs

[flacnvinyl]

Ubermenu is awesome, it really is. Love it especially on desktop. However, we are having an issue where items below a certain point (on mobile only) cannot be reached. In other words, long menus are inaccessible to mobile users. We are reading through every part of the documentation but have yet to discover anything that addresses this issue. Any help would be greatly appreciated!

[flacnvinyl]

This reply has been marked as private.

[Rupok]

Hi there,

As you might know already that the version of UberMenu included with the theme is an unmodified version of the plugin. So we can’t control the feature or functionality of an integrated plugin. You need to use the existing feature of them. If you need to extend this and need assistance on this; you might be interested to get a standalone license to reach the developer for support.

Thanks!

[flacnvinyl]

This reply has been marked as private.

[flacnvinyl]

This reply has been marked as private.

[flacnvinyl]

This reply has been marked as private.

[Rad]

Hi Drake,

There is another javascript error from custom javascript, this time, the closing }); is missing. I went ahead and added it, but it’s not related to the menu issue.

For the menu issue, the culprit is this CSS

@media screen and (max-width: 720px) {
.ubermenu.ubermenu-is-mobile.ubermenu-sticky {
     min-height: 400px;
     max-height: 600px;
     overflow-y: auto !important;
     -webkit-overflow-scrolling: touch;
}
}

Basically, it’s like declaring static height since you have both min and max. That’s the reason why it won’t close.

Thanks!

[flacnvinyl]

This reply has been marked as private.

[Rad]

Hi Drake,

I myself isn’t sure where it originates as it echoed directly on the page instead of CSS file. Hence, we can just redeclare this on your custom CSS.

@media screen and (max-width: 979px) {
.ubermenu.ubermenu-is-mobile.ubermenu-sticky {
     min-height: 0 !important;
     max-height: none !important;
}
}

Hope this helps.

[flacnvinyl]

This reply has been marked as private.

[flacnvinyl]

This reply has been marked as private.

[flacnvinyl]

This reply has been marked as private.

[Rad]

Hi there,

The provided CSS has @media screen and (max-width: 979px) which only covers tablets and mobile, it shouldn’t affect a desktop. Unless it breaks other CSS closing bracket when added.

Would you mind providing a video recording how it behaves when the above CSS is added? I tried it and I don’t see any issue on a desktop, maybe I’m just overlooking it and visual guide may help.

About the navigation on your video, it’s because the target device is just a mobile. In this thread https://community.theme.co/forums/topic/ubermenu-functionality-on-mobile-with-xs-hamburger-menu/ the suggested breakpoint is 959px, let’s change that to 1024px. That means it should target landscape tablet and smaller devices.

Let’s discuss the issue at a time to avoid confusion 🙂

Thanks!

[Author]

Posts