PRO - Header builder dropdown animations

[taotaoli]

Hi friends,
I have a website up at http://smartechproduct.com/ where I have created a mini cart in my menu. I’d like the animation to open the dropdown with the lower edge leading, rather than the top edge. Can you please tell me where to find this option or how to accomplish this?
Much obliged,
Andy

[lely]

Hi Andy,

There’s no option available for the animation of the dropdown. Though, you can customize the CSS available. On the ID field of the element on customise tab, add custom-cart. The following are the default custom CSS.

.x-dropdown {
    visibility: hidden;
    position: absolute;
    margin: 0;
    padding: 0;
    opacity: 0;
    transform: translate3d(0, 5%, 0);
    transition-delay: 0s, 0s, 0.5s;
    transition-duration: 0.5s, 0.5s, 0s;
    transition-property: opacity, transform, visibility;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 9999;
}
.x-dropdown.x-active {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-duration: 0.5s;
    transition-property: opacity, transform;
    pointer-events: auto;
}

To customize, add the ID and override the properties like below:

div#custom-cart-dropdown.x-dropdown.x-active{
 /*Add the new properties for transform/transition here*/
}

See this guide: https://www.w3schools.com/css/css3_transitions.asp

Hope this helps.