Site logo

Archived topic

Regarding mobile menu

7 replies · Started by Rohit on April 23, 2019

Viewing posts 1–8 of 8

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.

Hi there,

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

Let me know :)

Hi,
I have disabled the hummingbird plugin.

Hi there,

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

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.

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.

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

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;
}
This archived topic is closed to new replies.