[Resolved] How to reduce space between each page on mobile menu view

[Gary]

Hi,

I’ve checked forums and seen posts similar about reducing gaps between logo and start of menu etc but nothing about reducing the gaps between the menus themselves. On the domain I will list there are very large gaps between for example Home, About Us, Blog etc. This results in the last menu item not being visible.

Can you suggest a setting or CSS that will fix this? If you suggest CSS does it need to be added to Customize – Additional CSS?

Thanks
Gary

[Leo]

Hi there,

What if you decrease the menu item height for mobile?
https://docs.generatepress.com/article/menu-item-height-width/

If you want to keep the current header height on mobile and only want to decrease the menu item height, then try this CSS:

@media (max-width: 768px) {
    .main-navigation .main-nav ul li a    {
        line-height: 70px;
    }
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know if this helps 🙂

[Leo]

No problem 🙂

p.s. make sure you reply on here on the thread instead of the e-mail notification.

[Author]

Posts