[Resolved] Mobile Primary Navigation Header Line Height & Submenu Gap

Home Forums Support [Resolved] Mobile Primary Navigation Header Line Height & Submenu Gap

Home Forums Support Mobile Primary Navigation Header Line Height & Submenu Gap

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1572456
    melvin wang

    Hi,

    I’ve 2 issue in setting my Mobile Primary Navigation. Hope you could help

    1. Mobile Header Navigation Line Height & Mobile Logo

    View post on imgur.com


    I wanted to make my Mobile Navigation line height to 60px while the menu remain line height as what i set in customizer. What CSS I shall use?

    Also, I wish to make my mobile logo bigger after the set the line height to 60px. Kindly advise.

    2. Gap in submenu

    View post on imgur.com


    There’s some gap infront (maybe padding) for sub menu, each gap increases when the level of sub menu increases.

    Kindly advise ya.

    TQ

    Melvin

    #1572609
    David
    Staff
    Customer Support

    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;
    }
    #1572645
    melvin wang

    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,

    #1572735
    David
    Staff
    Customer Support

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

    #1572746
    melvin wang

    Hi David,

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

    #1572784
    David
    Staff
    Customer Support

    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.

    #1573790
    melvin wang

    Thanks David

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