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

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 🙂

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

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

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

No problem 🙂

Try this:

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

You’re welcome 🙂