[Resolved] Add transition to mobile menu

[Chris]

Hey guys, just re-opening this topic.. I have the following code for a mobile header transition (based off of Tom’s recommendations.

The main menu slides in and out well, however the sub menu only transitions out and does not have a transition when closed (it snaps shut).. Could someone please have a look and see what is missing? I am using the standard mobile header

@media (max-width: 768px) {
  
    #mobile-header .main-nav > ul,
    #mobile-header .main-nav .sub-menu {
        display: block;
        max-height: 0;
	width: 100%;
        overflow: hidden;
        transition: max-height 400ms ease-in-out, opacity 0s ease-out;
        opacity: 0;
	overflow: hidden;
    }

    #mobile-header.toggled .main-nav > ul,
    #mobile-header .main-nav .sub-menu.toggled-on {
        max-height: 1000px;
	width: 100%;
	transition: max-height 600ms ease-in-out, opacity 600ms ease-out;
        opacity: 1;
        overflow: hidden;
    }
}

[Chris]

What would be the “toggled-off” css class for the sub menu?

[David]

Hi there,

.sub-menu vs .sub-menu.toggled-on the former is what covers the toggled off state.

Is it possible to see the site and i can take a look at whats going on.

[Author]

Posts