NO BUG: Problem with menu after update to 1.8

Bugs
1

Since updating site to 1.8 menu item that has a submenu is displaying with a yellow background.
Menus has the following CSS to display yellow bar above menu items on hover which works on all menu items except the menu item that has submenu.

URL of site is layordesign.co.uk

#menu-main-menu > li::before {
    content : '';
    display: block;
    height: 4px;
    background-color: yellow;
    position: absolute;
    top: -0.4em;
    left: 0;
    right: 0;
    transform: scale(0, 1);
    transition: transform ease-in-out 300ms;
}

#menu-main-menu > li:hover::before {
    transform: scale(1, 1);
}
2

Looks like the default CSS may have changed, the :before maybe being used for somethign else now, maybe the ‘caret’ that was added to the new menu.

Quick solution for your site, add min-height: 4px, just after the height: 4px in your CSS.

2 Likes
3

Hi John,
Thanks so much for your report!

The ::before is used to be able to move the dropdown via transform, but still keep it accessible. Otherwise, you would always have a gap in between, which we prevent with ::before.

This conflicts with your custom CSS, but is very easy to solve with David’s hint.

Best regards,
timmse

4

Thanks wplit, yep that fixed it.