www.wysiwygwebbuilder.com

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

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

Pablo wrote: Thu Apr 16, 2026 6:07 am 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?

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.

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.