[Resolved] Add transition to mobile menu

[Tom]

Hi there,

Try changing it to this:

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

[Jean]

Thanks so much — it’s close, but it does some funky stuff when closing, especially if one of the subnavs is open. I don’t want to push you too hard on this — I know it’s above and beyond — but if you feel like checking it out… https://rdusdev3.wpengine.com/

Thanks again!

[Tom]

What kind of funky stuff?

You can try adding this:

.main-navigation .main-nav .sub-menu {
    visibility: visible;
    height: auto;
    opacity: 1;
    position: relative;
    left: 20px !important;
}

[Jean]

Thanks again — really close, now — just a shift in those first three items (the ones with submenus) on closing. I tried a bunch of things to fix that, but I’m just grasping at straws. Want to take one more look at it for me? Again, feel free to cut me off anytime.

https://rdusdev3.wpengine.com/

[Tom]

Not sure I’m seeing a shift – is it still happening?

[Jean]

Ah, I see now it’s only an issue with the sticky nav. I have to scroll down in my mobile emulator to get around the wordpress admin profile icon covering the burger ;). So I’m basically always looking at the sticky nav version in my mobile emulator. Anyway, you see it happening in the sticky nav version, right? BTW, would it be just as easy to fade in/out the main mobile menu opening/closing — similar to how the dropdowns in the desktop main nav fade in/out, or is that a whole other can of worms? Thanks again — I so appreciate the amazing support!

[Tom]

Are you wanting to fade in/out all the animations, sub-menu included?

[Jean]

I feel like fading in/out the main menu and using the current transition — the sort of opening down action — for the submenus would be perfect. But if it’s easier to just do all one way or the other, I’d probably say fade in/out on all. Wow, thank you!!

[Tom]

You have this:

.main-navigation .main-nav>ul {
    display: block!important;
    max-height: 0;
    overflow: hidden;
    transition: max-height 800ms ease-out;
}

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

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

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

Try this:

.main-navigation .main-nav>ul {
    display: block!important;
    max-height: 0;
    overflow: hidden;
    transition: max-height 800ms ease-out, opacity 800ms ease-out;
    opacity: 0;
}

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

.main-navigation .main-nav .sub-menu {
    display: block;
    max-height: 0;
    overflow: hidden;
    transition: max-height 800ms ease-out, opacity 800ms ease-out;
    opacity: 0 !important;
}

.main-navigation .main-nav .sub-menu.toggled-on {
    max-height: 1000px;
    transition: max-height 400ms ease-in, opacity 400ms ease-in;
    opacity: 1 !important;
}

[Jean]

Ooh, I love the fade! But those items with submenus are still shifting right when I close the sticky version.

[Tom]

Glad I could help 🙂

[Jean]

Thanks, but I think you missed my “but” — “Ooh, I love the fade! But those items with submenus are still shifting right when I close the sticky version.” And now I see there are variations of that shifting happening in both versions of the menu at tablet width/768px. Sorry, man — again, feel free to cut me off anytime. I tried again to tackle this myself — and I was able to prevent the shift on the phone/sticky by adding the rule below, but I lost the right align on the toggle arrows (which I could live with) and my addition exacerbated the issues with the tablet version — so I removed that bit. Anyway, just let me know if you’ve had enough ;). Thanks again.
https://rdusdev3.wpengine.com/

  .main-navigation .main-nav ul li a {
      float: left;
  }

[Tom]

Ah, sorry about that.

This should fix it:

@media (max-width: 768px) {
    .navigation-stick .menu li {
        float: none !important;
        text-align: left;
    }
}

[Jean]

Oh man, you got it!! Wow, thank you SO much — I don’t think I’ve ever experienced this level of support — unbelievable. Still making some related tweaks, but it’s live at https://rainforestfoundation.org/ — thanks again, really — can’t thank you enough for hanging in there with me.

[Tom]

Glad I could help 🙂

[Author]

Posts