- This topic has 13 replies, 3 voices, and was last updated 2 years, 3 months ago by David.
-
AuthorPosts
-
December 28, 2021 at 1:14 am #2061428Nico
Good morning!
Is there a way to minimize the distances between the individual menu items in the mobile view and in the tablet view? I’ve already tried my luck under Settings / Layout / Primary Navigation, but didn’t find anything there.
December 28, 2021 at 6:28 am #2061646DavidStaffCustomer SupportHi there,
go to Customizer > Layout > Primary Navigation – switch to Mobile responsive view and change the Menu Item Height.
December 28, 2021 at 8:05 am #2061863NicoDavid, I’ve tried that, but when I want to adjust the menu item height, the size of the header changes (see video).
December 28, 2021 at 11:27 am #2062040YingStaffCustomer SupportHi Nico,
Can you go to customizer > typography > typography manager, add this custom selector
#mobile-header.main-navigation .menu-toggle
, set its line height(mobile) to65px
?
https://www.screencast.com/t/xysNWIfSQZoThen 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 🙂
December 29, 2021 at 1:07 am #2062498NicoGood 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!
NicoDecember 29, 2021 at 6:10 am #2062746DavidStaffCustomer SupportCan you make sure that when setting the line height the
PX
units are selected. Currently they are not.December 29, 2021 at 7:19 am #2062821NicoDavid 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.
December 29, 2021 at 7:46 am #2062866DavidStaffCustomer SupportYeah 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; } }
December 29, 2021 at 7:57 am #2063025NicoDavid 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?
December 29, 2021 at 9:58 am #2063122YingStaffCustomer SupportHi 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; } }
December 30, 2021 at 12:08 am #2063543NicoGood 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
NickDecember 30, 2021 at 6:25 am #2063788DavidStaffCustomer SupportIts 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.
December 30, 2021 at 11:18 pm #2064529NicoGuten 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
NickDecember 31, 2021 at 6:45 am #2064762DavidStaffCustomer SupportGlad to be of help
-
AuthorPosts
- You must be logged in to reply to this topic.