[Resolved] Minimize the distances between the menu items (mobile view)

Home Forums Support [Resolved] Minimize the distances between the menu items (mobile view)

Home Forums Support Minimize the distances between the menu items (mobile view)

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #2061428
    Nico

    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.

    #2061646
    David
    Staff
    Customer Support

    Hi there,

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

    #2061863
    Nico

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

    #2062040
    Ying
    Staff
    Customer Support

    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 🙂

    #2062498
    Nico

    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

    #2062746
    David
    Staff
    Customer Support

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

    #2062821
    Nico

    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.

    #2062866
    David
    Staff
    Customer Support

    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;
        }
    }
    #2063025
    Nico

    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?

    #2063122
    Ying
    Staff
    Customer Support

    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;
        } 
    }
    #2063543
    Nico

    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

    #2063788
    David
    Staff
    Customer Support

    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.

    #2064529
    Nico

    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

    #2064762
    David
    Staff
    Customer Support
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.