-
Posts
-
Hello! I searched, but couldn’t find something that helped with my specific application.
I’m using Ubermenu with a non-traditional submenu approach in desktop, and I want the submenus to disappear completely from the navigation once the hamburger kicks in.
I tried using a
display:none;attribute, which does its job; however the default scripting appears to read the first mobile touch tap as a hover state and then requires a second tap to navigate to the link. Ubermenu understandably does not have a “get rid of submenus in mobile” solution (because normally, who would want to do that?), and I’m not sure if the hover-state tap is controlled with CSS or with JQuery.- Is there a way to make Ubermenu kill all submenu functions with a CSS-only media query?
- If not, would I have to modify the source jQuery?
- …or should I just figure out a separate workaround?
Note: The situation only occurs by tapping on touch devices; single-click functions fine with a mouse.
Hello There,
Thanks for writing in and the very detailed information. Please keep in mind that the tap in touch screen devices is not an equivalent to a click in desktops. The tap simulates the hover state and the second tap triggers the click. Perhaps this links could help: https://knackforge.com/blog/karalmax/how-deal-hover-touch-screen-devices
As this is all custom development, regretfully we won’t be able to assist further. Custom development is outside the scope of our support. We’re happy to provide advice and get you started in the right direction, but you would still be responsible for the implementation.
Thank you for your understanding.
*Update*
Apparently, Ubermenu does come through here! It’s just not very intuitive.
In Appearances>Menu, the little Ubermenu config pops up when you hover over a menu item. I found breakpoint and responsive controls buried within that. The workaround below I believe could still be useful for other development purposes.
*Original*
No worries! I had a suspicion that it would fall under a custom category.
Your link is a good start, but implementing this would require finding what Ubermenu is using for tap events and either modifying that code directly or creating a new script. I did find a “no-code” workaround (well… no hopping into source or hierarchy scripts) I’ll post here for completeness:
- 1.) Create two menus in Appearance>Menus; one with parented submenus, and another with only the top-level.
- 2.) Use a method (PHP, sidebar menu widget, whatever) to call both menus in, and control the response with CSS.
Explanation: No submenus on the mobile menu means that the “hover” event also triggers the link.
It’s not ideal, but it works and lets you easily update the menu sitewide.
- <script> jQuery(function($){ $("#no-reply-1307537 .bbp-template-notice, .bbp-no-topic .bbp-template-notice").removeClass('bbp-template-notice'); }); </script>
