CSS menu > Transition - Main Menu not working (WWB21)

[Mary]

Hi Pablo

(original issue)
In the CSS Menu, under the Transition - Main Menu section, when I choose any transition (for example "underline-center"), it doesn’t seem to work. When I preview it in the browser, no transition effect is applied at all.

Am I doing something wrong? Maybe I’ve misconfigured something somewhere? I’m a bit lost…

----> (updated issue)

In the CSS Menu, under the Transition - Main Menu section, when I choose any transition (for example "underline-center"), it doesn’t seem to work. When I preview it in the browser, no transition effect is applied at all.

After some testing, I noticed that the effect only works when border-style is set to "solid" with a border width (e.g. 1px).

When using border-style: custom, the transition only works if I enable solid borders on the top or bottom. If I set borders only on the left and right sides, the effect does not work at all.

Is this expected behaviour, or am I missing some configuration? I’m a bit lost…


thank you

[Pablo]

These transitions do require special setup. This is demonstrated in the 'CSS Menu - Transitions' example (Help -> Examples)

Is this expected behaviour, or am I missing some configuration? I

Yes, this is expected behavior. The border properties are used for underline/overline.
This works the same as in previous versions of WWB.

Demo:
https://www.wysiwygwebbuilder.com/suppo ... tions.html

[Mary]

These transitions do require special setup. This is demonstrated in the 'CSS Menu - Transitions' example (Help -> Examples)

Is this expected behaviour, or am I missing some configuration? I

Yes, this is expected behavior. The border properties are used for underline/overline.
This works the same as in previous versions of WWB.

Demo:
https://www.wysiwygwebbuilder.com/suppo ... tions.html

Thanks for the clarification! That makes sense.

While testing, I noticed that the transition works as long as a top or bottom border is defined. As a workaround, I managed to get the effect working by setting a solid border (top or bottom) with a color matching the background, so the animation is preserved while the border itself is not visible.

It seems to work well in practice, but I just wanted to confirm if this approach is fine, or if there is a more proper/recommended way to achieve the same result?

[Pablo]

The recommenced way is demonstrated in the example.
But basically it's important that the border color and width is defined because that is use for the line.

[Mary]

Got it, thanks for confirming!

Using a solid border with a background-matching color works well as a workaround in my case, so I’ll go with that.