Im currently testing the Prestige theme (trial) and I am trying to remove menu transitions, upon hover I would like the menu to appear instantly, as well as when switching between menus/mega menus. Likewise, when the curser moves away I would like the menus to disappear instantly.
Im not sure if this can be done with the trial of Prestige as I cannot access the theme code, I have been attempting to do this using the “custom CSS” field for the header section as well as for the entire site with no success. I also do not know whether this is controlled via CSS or JavaScript. I have inspected the website using dev tools trying to locate what controls these transitions but I probably don’t know enough at this point.
If you wan to use CSS, then desktop menu is child of section, but mobile menu is not. So you’d need to use Theme Setting “Custom CSS”, for desktop it should be ok to use Section setting.
Animations are partly controlled by CSS, but animation is also controlled by JS – for exampl when you move out of the submenu parent – there is a delay controlled by JS.
Very rough (too much importants) CSS to disable animations (on desktop) is like this:
nav li, nav ul {
transition: none !important;
transform: none !important;
opacity:1 !important;
}
.header__primary-nav-item:before,
.header__dropdown-menu:before {
transition: none !important;
}
Thank you for your response, however I have input the code you provided into the header section custom CSS, and also the custom CSS field in the theme settings and it has not had the desired outcome. I do see that it has stopped the animation of the line underneath the main menu items that ‘extends to the right’ upon hover, but that is all.
