[Resolved] Header Menu Customization

[Vish]

I’d like to have a nice animation when the menu button is tapped on mobile. While the slide out menu is not used, the menu items abruptly appear on the screen.

Q1. Is there any way to add an animation?
Q2. Is there any way to make two menu items to appear in one single line?

I have given the example website URL in the box below. (Visit from mobile) Note: that’s not my site. Thats an example of what I’d like to see in my site. Please check the menu in the given example.

Thanks!

[Tom]

Hi there,

Perhaps this CSS will help?:

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

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

    .main-navigation.toggled .main-nav ul li,
    .main-navigation .main-nav ul li {
        width: 50%;
        float: left;
        clear: none;
    }

    .main-navigation li.search-item {
        display: none !important;
    }
}

Let me know 🙂

[Vish]

Hi Tom

Thanks for the solution, it worked. One little downside is that the closing animation looks weird. I mean, when I press the close menu button, it stutters for a second before closing. Any way to make it smooth?

[Tom]

Can you update the URL to your website? The current one doesn’t seem to be using GP.

[Vish]

I have updated my site link. Please check.

[Tom]

Can you try the edited CSS above instead?

[Author]

Posts