Spacing when menu goes to 2 lines

This will probably be my last question, you’ve been very helpful and I appreciate it. When theres more than a few pages on the top menu, the menu goes to 2 lines. However, theres a lot of space between the two lines and I’m wondering how to add custom code to decrease the vertical space where the arrows are in this screenshot?

Hey there,

I hope you are well today and thank you for your question.

I checked both versions of your website, one of which the menu is replaced by a mobile menu.
Have you made modifications to your CSS code and do you still need assistance?

Also, share the URL you’re working with.

Best regards,

Thank you, yes, I still would like assistance on this for I’d like the code to make the menu look similar to the bottom screenshot here.

I had to turn a plugin on at to get the mobile menu to display at 1280 or less resolution (the @media code didn’t work). I’d still like to know how to code the menu so when it goes to two lines across it displays like the example in my previous post please.

Hello there,

Please try using the following CSS to adjust the height of the menu items:

.main-navigation .menu > li {
    height: 21px;

Best Regards,

Works great, thank you.

Hello there,

I am glad the solution worked for you.
Please feel free to contact us again in the future regarding any other issues.

Best Regards,