[Resolved] Mobile Menu

[Scott]

Hi

I’m having some trouble with my mobile menu.

My questions are:
1. For mobile, how do I reduce the white space underneath my navigation logo and the menu button?
2. To choose the size of the navigation logo and height of the items in the menu menu, my understanding is I need to use “Menu Item Height” in Customizing ▸ Layout Primary ▸ Navigation. However, after increasing to the desired height, the mobile menu doesn’t look right when it drops down – the spaces between the menu items are too big. I want to increase the logo size for mobile but minimise the space between items in the menu drop down.
3. Also relating to the menu drop down on mobile, there is a large amount of white space above the first menu item. How do I get rid of this?

Thanks
Scott

[Leo]

Hi there,

1. You have this CSS added which is setting the height:

.main-navigation .sticky-logo, .main-navigation .sticky-logo img {
    height: 110px;
}

Instead of using this, I would recommend setting the line height:
https://docs.generatepress.com/article/menu-item-height-width/

Or wrap your CSS with media query so it’s desktop only:
https://docs.generatepress.com/article/responsive-display/

2. Hmm the mobile header logo is meant for an icon type image. I think it will look slick if you only use the mountain logo without the site title. Or that’s not what you wanted?

3. I believe fixing #1 should fix this as well.

[Scott]

Thanks Leo – all clear.

[Leo]

No problem!

[Author]

Posts