Minimize the distances between the menu items (mobile view)

Hi there,

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

David, I've tried that, but when I want to adjust the menu item height, the size of the header changes (see video).

Hi Nico,

Can you go to customizer > typography > typography manager, add this custom selector #mobile-header.main-navigation .menu-toggle, set its line height(mobile) to 65px?
https://www.screencast.com/t/xysNWIfSQZo

Then you should be able to use the option David mentioned to adjust the menu items without effecting the logo and menu toggle line height.

Let me know if this helps :)

Good morning Ying!

I followed your instructions and then followed David's. The mobile display now looks completely broken. I think something is fundamentally wrong.

You can see it when you click on the link on our site and switch to mobile phone mode or look at the screenshot.

Thank you for your help!
Nico

Can you make sure that when setting the line height the PX units are selected. Currently they are not.

David you were right, I didn't set the pixel specification. However, despite the hack via the custom selector, the logo in the header on the left has shrunk again.

You can see it under the attached link when you switch to mobile phones.

Yeah the two are tied together.
Add this CSS to change your logo size:

@media (max-width: 768px) {
    .mobile-header-navigation .site-logo.mobile-header-logo img {
        height: 60px !important;
    }
}

David that solved the problem. Do you have an idea why we had to take this detour via the Custom Selector AND the @media Snippet and not just via the regular route "... Customizer> Layout> Primary Navigation - switch to Mobile responsive view and change the Menu Item Height .. . "?

Do we have a technical problem with the GP theme here on our side?

Hi Nico,

You don't have to use the custom selector, you can also only use CSS:

@media (max-width: 768px) {
    .mobile-header-navigation .site-logo.mobile-header-logo img {
        height: 60px !important;
    }
    #mobile-header.main-navigation .menu-toggle {
        line-height: 65px;
    } 
}

Good morning Ying!

Thank you very much for your feedback. The question that moved us, however, was another. Why can't we just do the setting via the GP Customizer as David suggested in the thread above?
Quote: "go to Customizer> Layout> Primary Navigation - switch to Mobile responsive view and change the Menu Item Height".

Why do we have to do this via the Custom Selctor # mobile-header.main-navigation .menu-toggle and the following CSS snippet?

@media (max-width: 768px) {
.mobile-header-navigation .site-logo.mobile-header-logo img {
height: 60px! important;
}
}

Do we have a problem in our configuration?

Or to put it another way, why does the size of our logo change when we change the setting via "... go to Customizer> Layout> Primary Navigation - switch to Mobile responsive view and change the Menu Item Height ...". See video.

Thank you for your help
Nick

Its a limitation of the Customizer. The Logo height in the mobile header is defined by the mobile menu item height. In the vast majority of cases it just works. In some cases like when dealing with a wider logo image than it requires some CSS treatment.

The Custom Selector in Typography is a new feature that is simply writing the CSS for you, but its only available for typography so in the instance where the logo also needs adjusting the Yings pure CSS method is the way to go.

Guten Morgen David!

Ok, das heisst auch das wir kein technisches Problem auf unserer Seite haben. Ich bin beruhigt. Danke Dir für die offene Kommunikation.

beste Grüße
Nick

Glad to be of help