Morphing Nav

Morphing Nav is a nestable element. It contains “Morphing Item” elements where the morphing div will morph when the user hovers on them.
In order to collapse Morphing Nav at mobile devices, you can just edit it’s flex settings at the style tab to a column.

Trigger: determines when to morph the morphing div: click or hover.
Page name as active item: determines the default Morphing Item where the morphing div will be set on page load if it matches the Page’s title.
Active item: determines the default Morphing Item where the morphing div will be set on page load. e.g: “1” will set first Morphing item as the active one on page load. Requires “Page name as active item” to be disabled.
Morphing transition: determines the duration of the morphing transition. The demo uses 0.3s.

At this section you are able to customize morphing div styles including height, width margin, border and background and box-shadow.

-Tamu