[Resolved] when in hamburger mode – make navigation menu transition slow

[liorsade8]

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

[Tom]

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 🙂

[liorsade8]

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

[Tom]

I’m not seeing a slideout/overlay trigger on that site – can you point me in the right direction?

[liorsade8]

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

[Tom]

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

[liorsade8]

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

[Tom]

I just updated the CSS above – can you give it another shot?

[liorsade8]

aaaaaawwwwwwwwweeesome!!! once again u’r the best!
it’s working great.
i’m not closing this topic yet.
i wanna check something.
thanks tom

[Tom]

No problem 🙂

[liorsade8]

hi
any code for making the overlay whole screen transition to be slower?
thanks

[Tom]

Try this:

.slideout-navigation.do-overlay {
    transition: opacity 1s, visibility 1s;
}

[liorsade8]

working great! thanks

[Tom]

You’re welcome 🙂

[Author]

Posts