Archived topic
Two sub-menus on top of each other
3 replies · Started by Roman on February 17, 2021
I noticed strange behavior on mobile devices.
If you tap fast and randomly on menu items on mobile device (Android, Chrome Browser) you could open two sub menus simultaneously. Also you could achieve this in desktop version of Chrome in mobile simulation mode, but it's harder and appears less often.
I started to dig dipper into this problem and turned off all my custom JS and CSS code.
I left only following custom CSS to investigate a cause:
#primary-menu > ul > li.sfHover {
background:blue !important;
}
#primary-menu > ul > li:hover {
outline: 5px green solid;
}Here is image of the problem.
I've found out that this problem is caused by GP default CSS:
.main-navigation:not(.toggled) ul li.sfHover > ul, .main-navigation:not(.toggled) ul li:hover > ul {
left: auto;
opacity: 1;
transition-delay: 150ms;
pointer-events: auto;
height: auto;
overflow: visible;
}Somehow on mobile devices class .sfHover and CSS :hover may trigger on different menu items.
Perhaps, GP team should reconsider JS code that gives mobile menu .sfHover class.
Hi there,
The sfHover class is there for accessibility reasons - it allows you to tab through the menu items/sub-menu items using your keyboard.
However, the class should remove itself when the item is no longer in focus. It sounds like you're causing the javascript/browser to get confused by tapping fast on multiple items (not standard user behavior). I'll take a look, but the javascript itself is very simple and works as intended under normal circumstances.
Will investigate further.
Thanks!
Hi, Tom!
Here I made a video of this problem. I deleted all custom JS and CSS code except:
#primary-menu > ul > li.sfHover {
background:blue !important;
}
#primary-menu > ul > li:hover {
outline: 5px green solid;
}It's a complex problem. In my opinion at appears in two cases.
1) Several menu items can simultaneously have .sfHover class. For example in case you tap and hold on other menu item when Chrome menu pops up.
2) On some condition menu item can have CSS class :hover regardless of whether it have .sfHover or not.
Some ideas
Maybe you should disable hover on touch devices. For example @media (hover: hover).
And on tap delete all other .sfHover except last one.
Thanks for this! Noted. Will see what we can do to improve it in GP 3.1.0 :)
