Archived topic
Styling for Mobile Menu - mobile header enabled (no off panel canvas)
14 replies · Started by Chris on January 11, 2023
Hi guys,
I've been stuck on this for a while now and can't seem to get it to work on my site..
https://codepen.io/theaftermath87/pen/meZgzM
Wanting to implement a simple slide in and out animation for the mobile menu, and also for the sub-menu.
I already have the hamburger animation functioning correctly, however I would like to have a more UX inspired mobile dropdown.
Any help would be appreciated, or if you have the CSS that functions with Generatepress
Hi Chris,
Starting with the dropdown animation, your intended animation relies on height for its transition.
You can try this CSS if you're using the GPP off-canvas menu:
nav#generate-slideout-menu {
height:0;
transition: height 0.5s ease-in;
}
nav#generate-slideout-menu.is-open {
height:100%;
}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;
}
}I see. I'm not seeing the site. There seems to be a security setting preventing me to do so. Can you temporarily disable this so we can see the issue?
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.
It would be difficult to assist without seeing the site.
If you can temporarily disable the setting that prevents us from viewing the site, we can try to assist you. However, take note that this level of customization would already be out of our scope of support.
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
Try adding this CSS:
.main-navigation.toggled .main-nav ul.sub-menu {
transition: opacity 0.5s ease-in;
}This adds a transition for the submenu to appear.
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...
This is what I get when I try viewing the site: https://share.getcloudapp.com/E0uRR7YK
Even if I try using a VPN, the same thing happens.
I can't inspect it because I can't access the site. Hope you understand.
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 there,
its really hard for us to debug an issue if we can't see the site.
And as far flung all the support team are, not one of is in Australia.
Is it possible to get round that ?
Hi David,
Very understandable, would you have access to a VPN in Canada? I could allow access from Canada if that works?
Update:
Got it all sorted by adding this to the CSS --
/* sub menu animation out */
.main-navigation .main-nav .sub-menu {
height: auto;
opacity: 1;
position: relative;
}I see. Glad you resolved the issue!