[Support request] Regarding mobile menu

Home Forums Support [Support request] Regarding mobile menu

Home Forums Support Regarding mobile menu

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #876862
    Rohit

    Hi,
    The mobile menu and search icon are in different space. When I click the mobile menu icon the space between the menu is not there. They are merging.

    GeneratePress 2.2.2
    GP Premium 1.7.8
    #876908
    Leo
    Staff
    Customer Support

    Hi there,

    Any chance you can clear then disable the Hummingbird caching plugin while we debug?

    Let me know 🙂

    #878476
    Rohit

    Hi,
    I have disabled the hummingbird plugin.

    #878768
    David
    Staff
    Customer Support

    Hi there,

    go to Customizer > Layout > Primary Navigation – switch to Mobile view and increase the Menu Item Height

    #878890
    Rohit

    Hi
    Thank you very much for the solution. There is one more problem I want the menu in the same line as the logo in mobile view. As you can see the header in the mobile view doesn’t look good.

    #878901
    David
    Staff
    Customer Support

    So that will need a different approach.
    First off that menu item height needs to be higher for mobile. I would suggest a min of 60px or users will have difficulty selecting them. We will also need it for the next step:
    In Customizer > Layout > Header activate the mobile Header and add your logo there.

    Once done let me know. And ill provide the CSS required to center the logo between the icons.

    #878908
    Rohit

    Hi
    I have done what you asked. But the logo size has gotten small. Can you help please.

    #878924
    David
    Staff
    Customer Support

    Now add this CSS:

    .main-navigation:not(.slideout-navigation) .mobile-bar-items+.menu-toggle {
        order: -1;
        margin-left: 10px;
    }
    .main-navigation .mobile-bar-items {
        margin-right: 10px;
    }
    .site-logo.mobile-header-logo {
        margin-left: auto;
    }
    .site-logo.mobile-header-logo img {
        height: auto !important;
    }
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.