Archived topic

Mobile Menu

3 replies · Started by Scott on April 1, 2018

Viewing posts 1–4 of 4

April 1, 2018 at 4:57 am #537713

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

April 1, 2018 at 9:02 am #537873

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.

April 1, 2018 at 5:34 pm #538173

Thanks Leo - all clear.

April 2, 2018 at 9:35 am #538817

No problem!

This archived topic is closed to new replies.

Start building better websites today.