Return to previous page

Effect on the main menu items list - by Aryanna_p

This topic has 4 replies, 2 voices, and was last updated 1 years, 4 months ago ago by Rose Tyler

Aryanna_p

Participant

August 5, 2023 at 10:20

Hello support
Is it possible to get this effect, that is on this website’s menu: https://www.sellarium.it/
the effect of the main menu animation when the menu item is active.

Thank you
regards

#363768 Copied Theme version: 8.3 WooCommerce version: 7.0

3 Answers

Rose Tyler

Support staff

August 6, 2023 at 07:49

Hello, Aryanna_p,

Thank you for getting in touch with us.

Please describe in more detail what exactly you mean.

Thank you for your cooperation and we look forward to hearing from you soon.

Kind Regards,
8theme team

#363785 Copied

Aryanna_p

Participant

August 7, 2023 at 11:05

hello thank you for the reply.
I would like to achieve a sort of animation/ effect on the mega menu list items: that the menu items move a little bit to the right when you point the menu item. You can see the effect on this megamenu: https://www.sellarium.it/
Thank you
Regards

#363861 Copied
Rose Tyler

Support staff

August 7, 2023 at 15:29
Hello, Aryanna_p,

We appreciate your prompt response.

Try to add the next custom CSS to your Theme Options → Theme Custom CSS → Global CSS and check then:
```
.et_b_header-menu li.menu-open-by-click.opened>.nav-sublist-dropdown:not(.nav-sublist), .et_b_header-menu:not(.header-secondary-menu) .item-design-dropdown li:hover>.nav-sublist>ul, .et_b_header-menu:not(.header-secondary-menu) li:hover>.nav-sublist-dropdown:not(.nav-sublist), .site-header .etheme_widget_menu .item-design-dropdown li:hover>.nav-sublist>ul, .site-header .etheme_widget_menu li:hover>.nav-sublist-dropdown:not(.nav-sublist), .site-header .widget_nav_menu .menu>li .sub-menu {
    animation-name: et-custom-menu-anim;
}
@keyframes et-custom-menu-anim {
    0% {
        -webkit-transform: translateY(-12px);
        transform: translateY(-12px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
    }
}
```
Example of result → https://gyazo.com/0b57f702b9b1f5060c6bd81bb842ae1b

Kind Regards,
8theme team
#363898 Copied
Tagged: effect, items, list, main menu, templates, woocommerce, wordpress
Viewing 4 results - 1 through 4 (of 4 total)