[Resolved] Menu problem

[Zuzana]

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

[Tom]

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!

[Zuzana]

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

[Tom]

Glad I could help! You too 🙂

[Author]

Posts