[Support request] Regarding mobile menu

[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.

[Leo]

Hi there,

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

Let me know 🙂

[Rohit]

Hi,
I have disabled the hummingbird plugin.

[David]

Hi there,

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

[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.

[David]

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.

[Rohit]

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

[David]

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;
}

[Author]

Posts