SOLVED: Submenu item background color applied to li instead of a

Bugs
1

Bricks Version: 1.4

Hi,

When setting color and background color on hover and CSS transition to submenu items links, there’s a glitch because background color is not applied to links but to li wrappers: there is no transition on background color changes.

I think background color should be applied to a tags and not li wrappers.

Quick fix:

.sub-menu li {
    transition: var(--same-transition-as-submenu-links);
}
2

Hi Yan,
Thank you very much for your report!

Can you please show the “glitch”? For me, it looks smooth overall: https://vimeo.com/718175075/f703213d8b

Best regards,
timmse

3

How did you set the transition?
Can you try with a 1s duration?

4

Hey,
all 0.35s ease

» https://vimeo.com/718355836/42517069c5

5

OK I understand :slight_smile:
I was setting transition with this:

a {
  transition: bla bla bla;
}

So it didn’t include li wrappers in menu, and I had no transition on background color.

But the CSS transition property on menu element seems to set BOTH transitions and a AND li wrappers. So it is not pure CSS, there is some processing behind it, isn’t there?
Is this CSS transition option specific for each element?

6

In 1.3.6 or 1.3.7 the animations were time-shifted - how exactly we fixed this I can’t say anymore, but hey: it works :sweat_smile:

I can mark the post as solved, right?

7

Yes time shift appears with nested elements like li a in some situations (when changing same inherited property, like text color, in both elements).
So, if background-color was applied to a tag instead of li, it would be healthier and safer.

But I guess we can live with that for now, since the menu transition works like that.

Maybe a blue warning to explain how it works?