Actions
Switch Theme
Getting startedInstallation
Basics
SocialsYouTube
Facebook
Jose Tamu
September 28, 2024 /  Advanced

CTA Nav

CTA Nav· Demo

How it works

CTA Nav is a nestable block element made up of a CTA and a Nav.
When the value set at Sticky Offset is reached, CTA Nav will convert from CTA element to Nav element.
The content to show initially, like a CTA Button, has to be placed inside CTA element.
The content that CTA Nav will transform to when Sticky Offset is reached, like a Nav Menu, has to be placed inside Nav element.
You can set CTA Nav element styles at “Nav Style” section or set any other style you need at the Style tab.
All the styles you need at CTA and Nav elements have to be set at their style tabs.

Animation

Sticky Offset: defines the value at which the CTA will stick to the top of the viewport and transform into a Nav. CTA Nav needs a bigger top spacing than the one declared at Sticky Offset.
For example, if your Sticky Offset is “20px” and CTA Nav is placed inmediately at “0px” from the top, then you haven’t leave enough spacing to let it transform. In this case, CTA Nav needs to be at least “21px” from the top when page loads.
Duration and CSS Easing: the transforming animation is done at CSS. These values will edit the duration and easing of the animation.

– Tamu

On this page