[Support request] Styling for Mobile Menu – mobile header enabled (no off panel canvas)

I’m using the standard mobile menu and currently using the CSS code below.. the transition is smooth on exit, however on entry it is instant (no transition).. I want to have a smooth slide down and slide out.

@media (max-width: 768px) {
    .main-navigation .main-nav {
        max-height: 0;
        overflow: hidden;
        transition: max-height 500ms ease-out;

    }

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

    .main-navigation .main-nav > ul {
        display: block !important;
    }

    .has-inline-mobile-toggle #site-navigation.toggled {
        margin-top: 0;
    }

    .main-navigation .menu-item-has-children .dropdown-menu-toggle {
        float: right;
    }

    .main-navigation .main-nav {
        flex-basis: 100%;
        order: 3;
    }
}

Hi Fernando,

Sorry I have quite a few security parameters enabled on my site.

This is how the animation is performing: https://watch.screencastify.com/v/RbQbcG169FKSMVhDzkzh

I want the animation to slide down, then slide back up for the main list. The main list code is:

@media (max-width: 768px) {
    .main-navigation .main-nav {
        max-height: 0;
        overflow: hidden;
        transition: max-height 500ms ease-out;
    }

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

    .main-navigation .main-nav > ul {
        display: block !important;
    }

    .has-inline-mobile-toggle #site-navigation.toggled {
        margin-top: 0;
    }

    .main-navigation .menu-item-has-children .dropdown-menu-toggle {
        float: right;
    }

    .main-navigation .main-nav {
        flex-basis: 100%;
        order: 3;
    }
}

I want the sub menu animation to slide down, then slide back up. The sub menu list code is:

/* mobile - dropdown arrow rotates on hover */

@media (max-width: 768px) {
	.main-nav .dropdown-menu-toggle .gp-icon svg {
    height: 1.3em !important;
    width: 1.8em !important;
	  top: 5px;
}

nav.toggled .sfHover>a>.dropdown-menu-toggle .gp-icon svg {
    transform: rotate(-90deg);
	  transition: 400ms ease-out;
}

/* sub menu item description */

.menu-item .description {
 display: inline-block;
 font-weight: 500;
 align-content: absolute;
 line-height: initial;
 padding-bottom: 0.5em;
 margin-top: -1em;
 margin-left: auto;
 margin-right: auto;
 -webkit-align-items: left;
 align-items: left;
}

@media (max-width: 768px) {
.menu-item .description {
 display: block;
	}
	
.description {
 padding-top: 1.5em;
}
	
/* Mobile menu */

@media (max-width: 768px) {
 .main-navigation .menu {
 background-color: var(--base-3);
height: calc(100vh - 56px);
}

.mobile-menu-open body {
    overflow: hidden;
}

#mobile-header.toggled .main-nav>ul {
    height: calc(100vh - 56px);
    overflow: auto !important;
    padding-bottom: 50px;
} 
	}

	
/* Mobile menu dropdown animation */
@media (max-width: 768px) {
.main-navigation .main-nav .sub-menu {
    display: block;
    max-height: 0;
    overflow: hidden;
    transition: max-height 400ms ease-out, opacity 600ms ease-out;
    opacity: 0 !important;
}

.main-navigation .main-nav .sub-menu.toggled-on {
    max-height: 1000px;
    transition: max-height 400ms ease-in, opacity 600ms ease-in;
    opacity: 1 !important;
}
	
	@media (max-width: 768px) {
    .navigation-stick .menu li {
        float: none !important;
        text-align: left;
    }
	}
	}

I am very close with getting this to function correctly.

Any help on this would be greatly appreciated! I am enjoying Generatepress, however I just need to get this mobile menu sorted out.

Okay well would you be able to point me in a direction on how to adjust the fade in speed for the mobile menu? After the hamburger is selected?

This is the code I can see that Generatepress generates as default

.dropdown-hover .main-navigation.toggled ul li:hover > ul,
.dropdown-hover .main-navigation.toggled ul li.sfHover > ul {
	transition-delay: 0s;
}

I would like this to fade-in at 0.5s to give a better user experience

I’ve found the previous post from Tom that I have been referring to https://generatepress.com/forums/topic/add-transition-to-mobile-menu/page/2/

This is my CSS styling for my site – https://chrispdesign.pro/ – I don’t understand what security you need me to turn off? Surely you can inspect it to see the html?

/* sticky navigation */

.main-navigation {
	  position: relative;
    z-index: 1;
}

	nav#sticky-navigation {
 box-shadow: -1px 1px 20px 3px rgba(191,191,191,0.28);
 -webkit-box-shadow: -1px 1px 20px 3px rgba(191,191,191,0.28);
 -moz-box-shadow: -1px 1px 20px 3px rgba(191,191,191,0.28);
}

/* desktop sub menu */

@media (min-width: 769px) {
	.main-navigation .sub-menu {
 margin-top: -6px;
 border-radius: 8px;
 box-shadow: -1px 1px 20px 3px rgba(191,191,191,0.28);
 -webkit-box-shadow: -1px 1px 20px 3px rgba(191,191,191,0.28);
 -moz-box-shadow: -1px 1px 20px 3px rgba(191,191,191,0.28);
}

.main-nav > ul li ul.sub-menu li.menu-item:hover > a {
 background-color: var(--base-2);
 color: var(--contrast-2);
 border-radius: 10px;
 align-items: center;
}
}

/* desktop - dropdown arrow rotates on hover */

@media (min-width: 769px) {
.menu-item .dropdown-menu-toggle .gp-icon svg{
    transition: transform 0.3s ease-in-out; !important;
	  transform: rotate(0deg);
	  height: 1.3em !important;
    width: 1.3em !important;
	  top: 5px;
}
}

@media (min-width: 769px) {
.menu-item:hover .dropdown-menu-toggle .gp-icon svg{
    transition: transform 0.3s ease-in-out; !important;
	  transform: rotate(180deg);
	  height: 1.3em !important;
    width: 1.3em !important;
	  top: 5px;
}
}

/* mobile - dropdown arrow rotates on hover */

@media (max-width: 768px) {
	.main-nav .dropdown-menu-toggle .gp-icon svg {
    height: 1.3em !important;
    width: 1.8em !important;
	  top: 5px;
}

nav.toggled .sfHover>a>.dropdown-menu-toggle .gp-icon svg {
    transform: rotate(-90deg);
	  transition: 400ms ease-out;
}

/* sub menu item description */

.menu-item .description {
 display: inline-block;
 font-weight: 500;
 align-content: absolute;
 line-height: initial;
 padding-bottom: 0.5em;
 margin-top: -1em;
 margin-left: auto;
 margin-right: auto;
 -webkit-align-items: left;
 align-items: left;
}

@media (max-width: 768px) {
.menu-item .description {
 display: block;
	}
	
.description {
 padding-top: 1.5em;
}

/* Mobile menu */

@media (max-width: 768px) {
 .main-navigation .menu {
 background-color: var(--base-3);
height: calc(100vh - 56px); 
}

.mobile-menu-open body {
    overflow: hidden;
}

#mobile-header.toggled .main-nav>ul {
    height: calc(100vh - 56px);
    overflow: auto !important;
    padding-bottom: 50px;
} 
	}

/* Mobile menu animation */

@media (max-width: 768px) {
		
.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;
}
	
  .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: 100%;
      padding-bottom: 5px;
      z-index: 999;
      background: var(--base-3);
      right: 0
   }
   .main-navigation ul li.search-item {
     display: none !important;
   }
}

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

@media (max-width: 768px) {
    .navigation-stick .menu li {
        float: none !important;
        text-align: left;
    }
}
	
	/*!
 * Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
 */
.hamburger {
  padding: 15px 15px;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: var(--contrast-2);
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible; }
  .hamburger:hover {
    opacity: 0.7; }
  .hamburger.is-active:hover {
    opacity: 0.7; }
  .hamburger.is-active .hamburger-inner,
  .hamburger.is-active .hamburger-inner::before,
  .hamburger.is-active .hamburger-inner::after {
    background-color: var(--contrast-2); }

.hamburger-box {
  width: 40px;
  height: 20px;
  display: inline-block;
  position: relative; }

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px; }
  .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 40px;
    height: 4px;
    background-color: var(--contrast-2);
    border-radius: 4px;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease; }
  .hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block; }
  .hamburger-inner::before {
    top: -10px; }
  .hamburger-inner::after {
    bottom: -10px; }

/* Collapse burger */
	
.hamburger--collapse .hamburger-inner {
  top: auto;
  bottom: 0;
  transition-duration: 0.13s;
  transition-delay: 0.13s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  .hamburger--collapse .hamburger-inner::after {
    top: -20px;
    transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; }
  .hamburger--collapse .hamburger-inner::before {
    transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--collapse.is-active .hamburger-inner {
  transform: translate3d(0, -10px, 0) rotate(-45deg);
  transition-delay: 0.22s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  .hamburger--collapse.is-active .hamburger-inner::after {
    top: 0;
    opacity: 0;
    transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear; }
  .hamburger--collapse.is-active .hamburger-inner::before {
    top: 0;
    transform: rotate(-90deg);
    transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); }
	
	.menu-toggle .mobile-menu,
.menu-toggle:before {
    display: none;
}

body .hamburger{
    transform: scale(.5);
    padding: 0;
    line-height: 0;
    vertical-align: middle;
}

body .hamburger.is-active .hamburger-inner::after,
body .hamburger-inner,
body .hamburger-inner::before, 
body .hamburger-inner::after,
body .hamburger.is-active .hamburger-inner, 
body .hamburger.is-active .hamburger-inner::before,
body .hamburger.is-active .hamburger-inner::after{
    background-color: currentColor;
}
	
/* hide original burger icon */
	
.icon-menu-bars{
display:none;
}
button.menu-toggle,
button.menu-toggle:hover, button.menu-toggle:visited, button.menu-toggle:active, button.menu-toggle:link{
background-color: transparent !important;
}

.pro-close svg{
display:none;
}

Could you please help me fix the bugs that is occurring with the main menu slide in/out – especially the sub-menu glitch and no slide-out transition for the sub menu…

Hi Fernando,

Apologies I have security setup on the hosting side to prevent anyone located outside of Australia from accessing the site.

I am very close with the mobile menu animations working… It animates the main menu items in and out, however it only animates the sub menu items out, and has no animation for when it is toggled-off…

    #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-in-out;
        opacity: 0;
	overflow: hidden;
    }

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

Hi David,

Very understandable, would you have access to a VPN in Canada? I could allow access from Canada if that works?