- This topic has 7 replies, 2 voices, and was last updated 5 years, 4 months ago by
.
-
Posts
-
Hi,
I’ve 2 issue in setting my Mobile Primary Navigation. Hope you could help
1. Mobile Header Navigation Line Height & Mobile Logo
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
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
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; }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
- You must be logged in to reply to this topic.
