Inline menu element dropdown position

[philippe_bonneau]

Hi great support team. I am working on an icon menu that you can see here https://dev.cirquedelapointeseche.com

I would like to display the dropdown from the upper left corner of each icon elements. I do not see such setting in the Dropdown Setup.

Thanks in advance.

[ruenel]

Hello @Philippe,

Thanks for writing in!

To resolve your issue, please insert this custom css section in your header.

.x-dropdown.x-active {
    left: 100%;
    top: 0;
}

We would love to know if this has worked for you. Thank you.

[philippe_bonneau]

Thanks @RueNel. The menu final position is now correct but the transition start from the center of the entire menu and not from the top of each element, from left to right.

I would also like the control the speed of the transition please.

[lely]

Hi Philippe ,

Please also add this CSS:

.x-dropdown {
    transform: translate3d(-5%, 0, 0);
    transition-delay: 0s, 0s, 0.5s;
    transition-duration: 0.5s, 0.5s, 0s;
}

Please adjust the values accordingly. The following might help:

• [translate3d](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate3d)
• [transition-delay](https://www.w3schools.com/cssref/css3_pr_transition-delay.asp)
• [transition-duration](https://www.w3schools.com/cssref/css3_pr_transition-duration.asp)

[philippe_bonneau]

Thank you @Lely. The delay is fixed. There is still a slight curve I do not want in the transition. Here is the code I use:

.x-dropdown {
    transform: translate3d(0, -62px, 0);
    transition-delay: 0s, 0s, 0s;
    transition-duration: 0.1s, 0.1s, 0s;
}

[rad]

Glad we could help and you’re most welcome!