Archived topic
when in hamburger mode - make navigation menu transition slow
13 replies · Started by liorsade8 on October 14, 2019
hi tom,
nowadays the mobile header navigation or regular navigation (in mobile mode, while in hamburger mode) transition entrance is fast. both in regular or slideout mode.
example:
my site in mobile mode slideout is fast: https://www.roidmi.co.il
my site in mobile mode regular is fast: https://www.studiosade.com
how can we slow it down?
example for slow nice transition in slideout mode from side: https://www.cobosrl.co
example for slow nice transition in regular mode from top to bottom side: https://www.craftedny.com or https://rvlv.agency or
also is there a way to make it appear as fade in and not from top, like here: https://www.muze-studio.co.il or https://manipine.com or http://www.kosygina21.ru
please help,
thanks
Hi there,
This might help:
#generate-slideout-menu {
transition: transform 1s cubic-bezier(.16,.68,.43,.99);
}Have you tried the overlay option? I think it might be what you're looking for (slide in vs fade).
Let me know :)
hi cool it's working nice in slideout...
what about transition from top to bottom for menu like this site: https://www.studiosade.com?
same code?
also i'll try regardless the overlay option... and let u know
thanks
I'm not seeing a slideout/overlay trigger on that site - can you point me in the right direction?
hi
i used the transition on this site: https://www.roidmi.co.il
and it's great.
on this site - https://www.studiosade.com i have a regular navigation menu... i didnt updated the theme yet and i was wondering for transition on the regular from top to bottom navigation...
any code?
thanks
Give this a shot:
@media (max-width: 768px) {
.main-navigation .main-nav > ul > li {
width: 100%;
display: block;
}
.main-navigation .main-nav > ul {
display: block;
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 100ms ease-in-out, opacity 100ms ease-in-out;
position: absolute;
}
.main-navigation.toggled .main-nav > ul {
max-height: 1000px;
transition: max-height 400ms ease-in-out, opacity 400ms ease-in-out;
opacity: 1;
}
}cool, it's working.
but why does it have an annoying closing...
meaning when u close the menu it's jumping the screen a bit
when in regular mode it doesn't,
any help please
thanks
I just updated the CSS above - can you give it another shot?
aaaaaawwwwwwwwweeesome!!! once again u'r the best!
it's working great.
i'm not closing this topic yet.
i wanna check something.
thanks tom
No problem :)
hi
any code for making the overlay whole screen transition to be slower?
thanks
Try this:
.slideout-navigation.do-overlay {
transition: opacity 1s, visibility 1s;
}working great! thanks
You're welcome :)
