Why isn't my menu drop down transition functioning properly?

Technical Q&A
1

I’m having trouble figuring out how to add a menu drop down transition to the “Login” drop down form. I’d like it to look similar to how the other menu drop downs. I think the transition should be something like:

transition: opacity .1s linear 40ms,visibility .1s linear 40ms;

Here is the site, https://judii-testing.myshopify.com/pages/services. Thank you in advance.

2

You’ll need to animate on max-height instead of visibility/opacity.

Video

Unhovered state should be max-height: 0, and hovered state can be something arbitrary like 100px

3
Show More
Show More

Thank you so much. I have added some changes, however now the bar disappears when you stop hovering over the login menu option. I’m not sure why that would be.

4

Looks like you still have the opacity/visibility rule on the close animation(both open/close animations should be max height). I changed these rules:

.site-nav.style--classic #menu-item-collections.focus .submenu, .site-nav.style--classic .has-submenu.focus .submenu, .site-nav.style--classic .has-submenu:hover .submenu {
    opacity: 1;
    visibility: visible;
    max-height: 300px;
    transition: max-height .4s ease-in-out;
}
.site-nav.style--classic .submenu {
    background: 0 0;
    position: absolute;
    opacity: 0;
    visibility: hidden;
    transition: opacity .1s linear 40ms,visibility .1s linear 40ms;
    padding-top: 31px;
}

To this:

.site-nav.style--classic #menu-item-collections.focus .submenu, .site-nav.style--classic .has-submenu.focus .submenu, .site-nav.style--classic .has-submenu:hover .submenu {
    max-height: 300px;
    transition: max-height .4s ease-in-out;
}

.site-nav.style--classic .submenu {
    background: 0 0;
    max-height: 0;
    position: absolute;
    transition: max-height .4s linear 40ms;
    padding-top: 31px;
}

And I’m able to get to the login dropdown without it closing. I didn’t do too much testing around your website though so I’d ensure that any of these changes don’t mess with other dropdowns on the site.