Add transition to mobile menu

Hey Adam,

Try this as your CSS:

@media (max-width: 768px) {
    .main-navigation .main-nav > ul {
        display: block;
        max-height: 0;
        overflow: hidden;
        transition: max-height 100ms ease-in-out;
    }

    .main-navigation.toggled .main-nav > ul {
        max-height: 1000px;
        transition: max-height 400ms ease-in-out;
    }

    .main-navigation .main-nav li {
        float: none;
        clear: both;
        display: block!important;
    }

    .menu-item-has-children .dropdown-menu-toggle {
        padding-left: 20px;
    }

    .main-navigation .main-nav .sub-menu {
        display: block;
        max-height: 0;
        overflow: hidden;
        transition: max-height 100ms ease-in-out;
    }

    .main-navigation .main-nav .sub-menu.toggled-on {
        max-height: 1000px;
        transition: max-height 400ms ease-in-out;
    }

    .both-sticky-menu .main-navigation:not(#mobile-header).toggled .main-nav>ul {
        position: relative;
    }
}

Let me know :)

Hey Tom, that worked great for most everything! It just seems to be lacking any ease/transition (up) when closing the menu. Is that possible?

Thanks!
Adam

You'll want to replace 100ms in your code with something higher :)

Thanks Tom! Between the quality of the theme and the quality of your support, I don't know why anyone else uses any other theme. :)

Thank you! Glad I could help :)

Hey Tom,

1. I just realized that when I expand the sub-menu in my mobile menu, and then collapse the entire mobile menu without first collapsing the sub-menu, the sub-menu remains visible in a really ugly way. I must have done something wrong with the code I added to target the sub-menu. Problem happens on both mobile menu and sticky mobile menu.

Picture of the problem (left is how it looks if I collapse the sub-menu before collapsing the main menu, right if I don't): https://www.dropbox.com/s/yithsri0px6pus2/Menu%20Problem.png?dl=0

2. Also (less important and maybe related), when I expand the mobile sub-menu (and main menu) it has a transition, but when I collapse it there is no transition (main menu does). Would love it to have the same transition when collapsing.

Thanks in advance,
Adam

Here is my code for the mobile menu:

/* Mobile Menu Slide Effect */
.main-navigation.toggled .main-nav li {
    text-align: center !important;
}
	.main-navigation.toggled .menu-item-has-children .dropdown-menu-toggle {
    float: none;
}
.main-navigation .main-nav > ul {
        display: block;
        max-height: 0;
        overflow: hidden;
        transition: max-height 400ms ease-in-out;
    }
    .main-navigation.toggled .main-nav > ul {
        max-height: 1000px;
        transition: max-height 400ms ease-in-out;
    }
    .main-navigation .main-nav li {
        float: none;
        clear: both;
        display: block!important;
    }
    .menu-item-has-children .dropdown-menu-toggle {
        padding-left: 20px;
    }
    .main-navigation .main-nav .sub-menu {
        display: block;
        max-height: 0;
        overflow: hidden;
        transition: max-height 400ms ease-in-out;
}
    .main-navigation .main-nav .sub-menu.toggled-on {
        max-height: 1000px;
        transition: max-height 400ms ease-in-out;
}
    .both-sticky-menu .main-navigation:not(#mobile-header).toggled .main-nav>ul {
        position: relative;
}

Hey Adam,

I'm not sure I fully understand. What makes the screenshot on the right happen?

Any chance you can re-open up your dev site so I can take a look?

Hey Tom,

dev.democracyrd.org

Load on mobile to trigger mobile menu > Open mobile menu > click on About Us to expand sub-menu > click 'X' to close entire mobile menu (without first closing sub-menu).

Sub-menu should remain visible (and off to the left) over content even though main menu is collapsed. If you want I can make a short screencast - let me know.

Best,
Adam

Try adding this CSS:

@media (max-width: 768px) {
    .main-navigation:not(.toggled) .toggled-on {
        position: relative;
        width: 100% !important;
        text-align: center;
    }
}

That did it! Thanks Tom!

And can you tell from my code why the sub-menu closes without any transition?

Adam

What if you add this?:

.main-navigation.toggled .main-nav ul ul {
    position: relative;
    left: auto!important;
    height: auto;
    opacity: 1; 
    visibility: visible;
}

That did it! I got a couple of beautiful menus on our site now! Thanks as always Tom! :)

You're welcome :)

Hey Tom, thanks for this -- this gives me a nice little transition on opening my mobile submenus, but the submenus still snap shut, and more importantly the whole menu still snaps open and closed. Any chance you can help me smooth those things out, or at least the open/close of the main mobile menu?

I'm working at https://rdusdev3.wpengine.com/ (although we might go live within a day or two at http://rainforestfoundation.org/ )

And here's what I have so far:

@media (max-width: 768px) {
  .main-navigation .main-nav > ul {
      display: block;
      max-height: 0;
      overflow: hidden;
      transition: max-height 1000ms ease-in-out;
  }
  .main-navigation.toggled .main-nav > ul {
      max-height: 1000px;
      transition: max-height 1000ms ease-in-out;
  }
  .main-navigation .main-nav li {
      float: none;
      clear: both;
      display: block!important;
  }
  .menu-item-has-children .dropdown-menu-toggle {
      padding-left: 20px;
  }
  .main-navigation .main-nav .sub-menu {
      display: block;
      max-height: 0;
      overflow: hidden;
      transition: max-height 1000ms ease-in-out;
  }
  .main-navigation .main-nav .sub-menu.toggled-on {
      max-height: 1000px;
      transition: max-height 1000ms ease-in-out;
  }
  .both-sticky-menu .main-navigation:not(#mobile-header).toggled .main-nav>ul {
      position: relative;
  }
}

Any help would be greatly appreciated -- thanks so much!