Mobile Primary Navigation Header Line Height & Submenu Gap

Hi there,

something to think about for making those changes - tap targets on a mobile device should be a minimum of 48 x 48 or Google will complain tap targets are too small or links are too close together. I would recommend you keep the minimum menu item height to 50px to stop that.

Logo's have some padding above and below them, simply removing that may help with your logo size issue:

#mobile-header .site-logo.mobile-header-logo img {
    padding: 0;
}

Hi David

Thanks for your quick response. Your advice is good for meet Google requirement. I will follow that

Can you look into the second question on https://generatepress.com/forums/topic/mobile-primary-navigation-header-line-height-submenu-gap/#post-1572456
Regarding submenu spacing?

Thanks david,

Can you disable autoptimize as theres some broken CSS - let me know.

Hi David,

Described autoptimize.(p/s how do notice there's broken CSS?)

Try moving your /* navigation hover effect */ CSS inside a media query so it only applies to desktop - like so:

@media(min-width: 769px) {
    /* navigation hover effect */
    .main-navigation .main-nav ul li>a {
        transition: transform 500ms ease-in-out;
    }

    .main-navigation .main-nav ul li:hover>a {
        transform: translate3d(0, -3px, 0);
    }
}

Developers Tools > Computed Styles was displaying a busted CSS property. Probably just needed to clear its cache.

Thanks David

You're welcome