[Resolved] Add transition to mobile menu

[Adam]

Hey Tom and Generate Press Team,

I’m trying to add a subtle transition to the mobile menu so that it appear to drop down. I used the code you suggested on this post: Ease-in transition for mobile “Hamburger” dropdown menu

@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;
    }
}

But I have 3 issues:

1. My mobile menu is vertical and centered, yet when closing for some reason this transition makes it briefly appear horizontally, which looks really glitchy. I’ve confirmed that when I delete that code the problem goes away (but obviously I’m left without any transition effect).

2. I can’t figure out how to add the same effect to sub-menu items. I tried duplicating the above code and adding another ul or an li but to no avail.

3. I would love for the body to drop down when the mobile menu expands. On my pages the header has a slanted bottom look (achieved through Elementor with a Shape Divider on the top section just below the header), and I would love for the mobile menu to expand down (with the transition) and push the body down so that the menu has the same tilted shap divider and doesn’t cover up any of the body content. Is that possible?

Thanks!
Adam

[Tom]

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 🙂

[Adam]

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

[Tom]

You’ll want to replace 100ms in your code with something higher 🙂

[Adam]

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. 🙂

[Tom]

Thank you! Glad I could help 🙂

[Adam]

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;
}

[Tom]

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?

[Adam]

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

[Tom]

Try adding this CSS:

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

[Adam]

That did it! Thanks Tom!

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

Adam

[Tom]

What if you add this?:

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

[Adam]

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

[Tom]

You’re welcome 🙂

[Jean]

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!

[Author]

Posts