[Resolved] Drop-down menu doesn't work the same in 2.0.1

[Daren]

Hi Tom and Leo,
When I updated to 2.0.1 today my drop-down menu stopped working the way it used to. I had it just like you do here on your site for the Help drop down when you click (mine is on hover) and the top of the sub-menu is flush with the bottom of the header section. Only now when I hover it still appears as expected but when I move the cursor down to select a submenu item it disappears before I get there. I have since reverted back to 1.4 and it now works as before. What can I do to make it work in 2.0.1?

Thanks,
Daren

[Leo]

Hi there,

A bit hard to tell without seeing the issue live unfortunately.

Can you give this CSS a shot? https://generatepress.com/forums/topic/hover-on-the-main-menu-does-not-work/#post-442646

[Daren]

Should I update to 2.0.1 again and send a link?

[Leo]

Yes if you can duplicate the issue on a staging site it will definitely help 🙂

Thanks!

[Daren]

Here it is: http://holdtrade.darenjm.com/

Thanks Leo

[Tom]

Instead of using margin-top, try padding-top.

.main-nav ul {
    padding-top: 18px;
}

[Daren]

Thanks Tom, I’ll give it a try.

[Daren]

That was it. Why did margin work before the update and not after?

[Tom]

The old menu used javascript and had a timer on it so the menu wouldn’t disappear for a half second after the mouse left the menu item. So actually if you were slow with your mouse, the same issue would have happened.

The new menu uses pure CSS which has no such timer.

[Daren]

So margin separated the ul creating a gap whereas padding does not.

[Tom]

That’s right, margin is outside the element which causes blank space, whereas padding is inside the element.

[Daren]

Thanks again Tom, appreciate the help on this.

[Tom]

You’re welcome 🙂

[Author]

Posts