Archived topic

Header Menu Customization

5 replies · Started by Vish on April 3, 2018

Viewing posts 1–6 of 6

April 3, 2018 at 4:13 pm #540339

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!

April 3, 2018 at 10:29 pm #540529

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 :)

June 12, 2018 at 6:37 pm #598672

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?

June 12, 2018 at 8:02 pm #598696

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

June 12, 2018 at 9:07 pm #598729

I have updated my site link. Please check.

June 13, 2018 at 9:11 am #599207

Can you try the edited CSS above instead?

This archived topic is closed to new replies.

Start building better websites today.