[Resolved] hover behaviour changed on menus

[Becky]

Hi Has anything changed in the dropdown menu javascript. it used to be that the menu could just be hovered over and a sub item selected but now the sub-menu can only be hovered over and selected once the topmenu item has been actively clicked in chrome on pc and mac and not at all in safari on mac. it is working fine in mobile sites. I have deactivated all plugins in our staging system and can still replicate this issue.

[Tom]

Hi there,

The dropdown menu doesn’t use javascript as of GP 2.0.

I just checked out your site and the sub-menus are appearing when I hover over the parent items. Did you get this fixed?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Becky]

Hi Tom,

The sub menus appear fine but in Safari they disappear when you try and roll from the top menu item over the sub items to select them. i have a video if you need to see this in safari.

In chrome you cannot now roll over the sub items (ie the menu dissapears) unless you click on the top menu item to make it active. it turns from grey to purple. This is a little at odds with how menus normally work ie active on hover not onclick

I originally used CSS to drop the sub-menu slightly to align it with the bottom of the header. Would it be this small gap that might cause the issue if now the menu has changed – i assume to pure css? .

I’ve never had any issue with the menu before version 2. Its been running happily since Jan 2016 :D. Anyway keep up the great work its a great flexible system. 😀

[Tom]

Ah, got it. You have margin-top applied to your sub-menus, which is causing the issue.

You can fix it by adding this CSS:

#menu-header-menu > li {
    padding-bottom: 10px;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Becky]

Thanks all working great again :D. Super pleased you have moved to pure css as well

Is it possible to request more icons in the essential fontawesome icons 😀 i needed to download the full set to get phone envelope and social media icons showing.

Thanks for all your hard work on this theme 🙂

[Tom]

We’ve actually removed essentials in the upcoming GP update, and only include the necessary icons directly in the theme.

I would suggest building your own icon pack using a tool like IcoMoon – that way you can choose the exact icons you need 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts