[Resolved] Mobile Hamburger animation

[Yaroslav]

Hi guys!

I want my mobile menu to reveal smoothly with animation, please help to achieve it.

The reference:

https://rinodeboer.com/

Thanks!

[Tom]

Hi there,

Give this a shot:

@media (max-width: 768px) {
    .main-navigation .main-nav > ul,
    .main-navigation .main-nav .sub-menu {
        display: block;
        max-height: 0;
        overflow: hidden;
        transition: max-height 100ms ease-in-out;
    }

    .main-navigation.toggled .main-nav > ul,
    .main-navigation .main-nav .sub-menu.toggled-on {
        max-height: 1000px;
        transition: max-height 400ms ease-in-out;
    }
}

[Yaroslav]

Hi Tom! Unfortunately, it doesn’t work. I updated the initial post adding the link to my website.

By the way, I used the code from your post to make an animated hamburger:
https://generatepress.com/forums/topic/spinning-hamburger/

Maybe these two are somehow conflicting with each other?

[Tom]

Ah, tough one because of the mobile header transparency, but try this:

@media (max-width: 768px) {
    #mobile-header,
    #mobile-header a {
        transition: background-color 400ms ease;
        transition-delay: 300ms;
    }

    #mobile-header.toggled,
    #mobile-header.toggled a {
        transition: background-color 400ms ease;
        transition-delay: 0;
    }
  
    #mobile-header .main-nav > ul,
    #mobile-header .main-nav .sub-menu {
        display: block;
        max-height: 0;
        overflow: hidden;
        transition: max-height 400ms ease-in-out;
    }

    #mobile-header.toggled .main-nav > ul,
    #mobile-header .main-nav .sub-menu.toggled-on {
        max-height: 1000px;
        transition: max-height 400ms ease-in-out;
    }

    #mobile-header .main-nav li {
        float: none;
        clear: both;
        display: block!important;
    }
}

[Yaroslav]

Thank you!

[Tom]

You’re welcome 🙂

[Author]

Posts