[Resolved] Header Menu Customization

Home Forums Support [Resolved] Header Menu Customization

Home Forums Support Header Menu Customization

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #540339
    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!

    GeneratePress 2.0.2
    GP Premium 1.6.2
    #540529
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #598672
    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?

    #598696
    Tom
    Lead Developer
    Lead Developer

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

    #598729
    Vish

    I have updated my site link. Please check.

    #599207
    Tom
    Lead Developer
    Lead Developer

    Can you try the edited CSS above instead?

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.