Archived topic
Menu problem
3 replies · Started by Zuzana on February 17, 2021
Hello,
On this page: https://www.spokojnydomov.sk/ we implemented mega menu using this article: https://docs.generatepress.com/article/building-simple-mega-menu/. The main links (such as "Stavebné práce" for example) have # link since they are not real pages, they are there just to open the particular submenu, which works well. However once I click on one main menu link, the submenu stays opened even if I move the mouse away or hover on another main menu link which creates a strange effect of overlapping submenus.
Another problem is with the mobile menu - it is set to be the mobile sticky menu, however since it has many subpages, I am not able to scroll the mobile menu.
You can see both issues in this video, which I attach in the private information.
Thank you very much! :)
Zuzana
Hi there,
For the first issue, you could try this:
.using-mouse .main-navigation:not(.toggled) ul li.sfHover:not(:hover) > ul {
display: none;
}
The second issue is trickier. The best option is to use the Off-Canvas Panel for mobile: https://docs.generatepress.com/article/off-canvas-panel-overview/
Hope this helps!
Hi Tom,
thank you very much, your code solved the problem and for the mobile menu, I used the Off-Canvas Panel, which is also working good.
Thank you for the great support and have a nice day. :)
Zuzana
Glad I could help! You too :)