Adjust Menu item height in slideout menu

[Michael Andersen]

Hi

How can I with CSS adjust the menu item height in slideout menu.

GeneratePress 1.3.46

GP Premium 1.2.96

[Leo]

Hi Michael,

Is that in mobile or you slideout navigation on desktop as well?

Any chance you can provide a link to your site?

Let me know.

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

[Michael Andersen]

Hi Leo,

I think the menu item height – or the space between the menu item – is to big. It comes from the setting in Primary Navigation -> Menu Item Height as far as I can see. And the setting here is OK. I want a high primary menu layout.

This has influence on the layout – as I understand it – of both the slideout menu (both in mobile and desktop) and the mobile menu (when slideout menu disabled)

So my wish is to control the menu item height in the mobile menu and in the slideout menu (mobile and desktop) using CSS.

I hope this makes my question more clear – and I hope there is and solution.

[Leo]

Hi Michael,

Give this CSS a shot:

.main-navigation.slideout-navigation .main-nav ul li a {
    line-height: 50px;
}

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

can you provide a link to your site is this doesn’t work?

Let me know.

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

[Tom]

That should work. This will be a future option in the Customizer.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Michael Andersen]

Hi Leo

Thanks a lot. It works 🙂

And I added this CSS also for sub menu-item in the slideout primary menu

.main-navigation.slideout-navigation .main-nav ul ul li a {
    line-height: 30px;
    padding-left: 30px;
}

Then it looks like this (this is pre-test, so colors and text phrases are just for test purpose):

Tom: Nice to have this feature in the Customizer (also for sub menu-items)

/Michael

[Leo]

You’re welcome! I like that look!

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

[Author]

Posts