Submenu doesn’t work on tablet/ipad
-
Hello!
I started working with the Bento theme. I’m happy with the result, but there is one problem. I use a submenu, on laptop, mac etc. it works perfect even for the mobile menu. But when I visit the website on a tablet (landscape) then the submenu does not work like I want it to.
When you click on “organisatie”, the submenu opens but when you release the screen you automatically go to the “organisatie” pagina and submenu closes. So instead of you have to swipe to the page in the submenu you want to open. I really want to make it possible that if you click on the main menu item, you have all the time to release the screen and to pick the page you would like to see.
I hope my question is clear, since I find it really difficult to explain it in English.
The page I need help with: [log in to see the link]
-
Hey Linda,
thank you for choosing Bento!
The tablet you’re viewing the website on probably has a wide screen – Bento used to have a breakpoint at 1280px after which the menu became a mobile-friendly hamburger, but in the latest versions of the theme it’s been reduced to 1024px following countless requests from users. If you open your website on a smaller screen (or just flip the tablet into portrait mode) the menu becomes touch-consistent.
To the best of our knowledge there is no hack-free way of detecting whether a device is a tablet or a laptop in 100% of the cases, since the screen size variety is so wide nowadays. According to statistics by Statcounter, web views from tablet devices with >1024px displays account for less than 10% of the total tablet views (which is, in turn, less than 1% of the total web views from all devices combined). There are thus three ways to resolve this:
1. Make the menu flat, i.e. remove the submenu hierarchy. In this case the menu will stay usable on all screens with 100% certainty. For your website, that seems like the hardest option since there are quite a few items there in the submenus.
2. Manually change the breakpoint on your website to 1280px – please see this thread for more information on how to do it. The downside of this is that on smaller laptops the website will display a mobile menu.
3. Leave everything as is and focus on the remaining 99% of the web users (pragmatic, I know, but the most efficient time-wise, so had to list it as well).
The topic ‘Submenu doesn’t work on tablet/ipad’ is closed to new replies.
