Pro - Navigation Collapsed

hi there,
i find the “navigation collapsed” impossible to use on an smartphone. tested on android and ios.
often the submenüs do not open when tapping on the arrow (sub menu trigger -> sub indicator). and the whole menu often does not respond.
please have a look in the secure note and into the website. i did not alter anything with css or otherwise.
what do you suggest? another menu element?
i need the top menu items to be active since there are pages linkt to them but also be able to access the submenu items on the same button. the way it is now seem to complicated for the normal user to me.
thanks a lot for your help! best wishes, kai

Hello Kai,

Thanks for writing in!

Yes, the Sub Menu Trigger must be set to “Sub Indicator” so that you can click on the link.

It could also be caused by a plugin conflict, amongst other things. Please check out this troubleshooting article here and follow the instructions for the following sections (where appropriate):

  • Testing for Plugin Conflict
  • Child Theme
  • CSS/JS Customization
  • Disabling Cache
  • Disabling CDN

By the way, please also check the Navigation Layered element.

Best Regards.

hello @ruenel,

thanks for your reply. i went through you list but the problem persists:

• deactivated all plugins and only the ones not bundeled with pro
• using a child theme
• no js customizations, few css customisations which i removed for testing purposes
• using no cache plugin. also deleted caches on safari ios!
• using no cdn

furthermore i exchanged the navigation collapsed with the navigation layered. same problem.

also i must say i remember the same problem 2-3 years ago with another website i built with pro. never solved that one either.

i want to describe the problem a bit better:

when using the menu (on iphone safari) i the first few taps usually work as they should. tapping in the main button and on the subindicator alternatively repeatadly. after doing this 6-8 times (it varies) i tap again on one of the subindicators. this is when the problem starts. it does no open the submenu and it does not open the main page. nothing happens. from then on the whole menu is behaving unpredictable.

please test this on my site. and please have a look in the dashboard if it helps. i really want to solve that problem!

besides this problem i also want to mention that i don’t find the approach of having a left and right side of one button to tap on very user friendly / intuitive. is there any menu which would work differently? very important is that it is clear to the user that there are submenu items. the small arrow (indicator) might not be enough. any ideas how to tackle that problem?

thanks again for your help and have a nice weekend! kai

Hello Kai,

Please edit your header and insert the font size of your submenu indicator icon.

If this isn’t enough, you will need to adjust the padding around the icon to make the trigger area for the icon a little bit bigger. Since there isn’t an option to insert the padding in the element settings, you will have to insert it manually as an inline element CSS. Find the “Customize” tab and then insert this CSS code;

$el .x-anchor-sub-indicator {
   padding: 8px 12px;
}

Feel free to adjust the padding as you need. Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

We would love to know if this has worked for you. Thank you.

hi @ruenel,

thanks for your helpful reply! :wink:

with the provided css code the menu works fine now. hurray! is that something you will change in future updates of pro?

but the font size of my submenu indicator icon was exactly as it is shown on your screenshot. i did not have to change it. right?

thanks again for your help! best wishes, kai

Hey Kai,

I’ll post this in our issue tracker so our development team would be made aware that it’s hard to tap on the sub-indicator if it has no padding. If there’d be no conflicts, there’s a chance that they’ll add a padding option in the coming releases.

If you want to increase the icon size, you can increase the current font size.

The problem with the menu tapping in iOS, by the way, is a bug. When the menu gets long by showing sub-menus, scrolling is enabled and that’s currently where the bug is. That is why Ruenel suggested the Navigation Layered as sub menus are shown separately that way.

Hope that helps.

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