WonderCMS community

Hi NorfolkGreg,

hope everything is going well for you.

Checked your website again and I would keep everything as is for the menu. And only for the tier 2 sub-menu where the arrow is visible, add with css pointer-events: none; just on the arrow. If we look at Games sub-menu:

Menu (using input checkbox for mobile menu)
Home
Wonder
Games ⬇
- Board
- Table

where ⬇ is: .menu > li > a::after {pointer-events: none;} and disables interacting with link, so taping-clicking on Games will lead to Games page and taping on Games arrow will open-reveal sub-menu and close if it is not focused, for example taping outside the menu should close sub-menu. It will not work if there is another (tier 3) sub-menu, nested inside Board or Table (because first pointer-events losses focus).
That's just a theory, I didn't test it out yet.

Another option is to reveal sub-menu items on mobile and they are always visible but styled differently from the top menu items. For example if you tap on hamburger icon on your website:

Home
Wonder
Games
- Board
- Table
...

everything is revealed and there is no need for pointer-events.

Thanks Nox, for spending time on this.

Perhaps I should explain what I would like to achieve, as my existing site is only a work in progress and doesn't include all the things I would like the GregCustom theme to be able to deliver.

I want to allow for multiple dropdown menus each with, say, half a dozen options that may also include further dropdowns, as I assume (haven't tested) WonderCMS allows multiple dropdown levels, not just the one second level option that I currently have on my site.

In my testing of the code Gemini produced, I would sometimes find that if I widened the window I would find a dropdown open although the mouse pointer was nowhere near it. Tolerable as it wouldn't really be discovered by most users and easily correctable with a sweep of the mouse, but not as neat as I would like.

Gemini never managed to achieve the two things I asked of it for Narrow screens.

For top level options where there is a dropdown
1. A tap should Open a closed dropdown AND close any other open dropdowns
2. A tap on an open dropdown should close it

Gemini did use CSS pointer-events and was using JavaScript to do the rest of the work.

I believe that it may be impossible to do what I want with the existing menu code generated by Wcms. I suspect it needs some additional tags/classes within the menu structure that will allow theme code to distinguish between different sub-menus, their level within the menu structure and their open/close status and that will be true whether CSS alone is used or JavaScript.