[Resolved] Adjust space between mobile menu items

[Shawn]

I want to reduce the space between items in the navigation menu when viewed on mobile. Currently, the space is 85px. I changed it to 45px using this:

@media (max-width: 768px) {
.menu-toggle, .main-navigation .mobile-bar-items a {
line-height: 45px;
}
}

This doesn’t work. I know I must have done something wrong. Please advise.

Thanks.

[Leo]

Hi there,

Have you tried the menu item height option with the mobile toggle activated?
https://docs.generatepress.com/article/menu-item-height-width/

Let me know if this helps 🙂

[Shawn]

When I adjust menu item height, it reduces the size of the logo which I don’t want any smaller.

[Leo]

That case try this:
https://generatepress.com/forums/topic/menu-item-width/#post-596935

Let me know 🙂

[Shawn]

That did it, thanks Leo.

[Leo]

No problem 🙂

[Author]

Posts