The menu items are currently displaying on two lines

Dear WoodMart Support Team,

I’m currently using the WoodMart theme for my WooCommerce store and I’ve noticed that my main navigation menu is wrapping onto two lines. While I can temporarily adjust it so it appears on one line, this isn’t a real solution because I plan to add at least 3 more menu items in the near future.

What I’m looking for is a proper solution that ensures the main menu always stays on a single horizontal line regardless of screen size or future additions. Ideally, I’d like to expand the horizontal space or reduce paddings between menu items based on desktop resolution.

Could you please advise me on how to achieve this in a clean and scalable way?

Thank you very much in advance,

Best regards,

Cédric M

[Hung Pham]

Hi lost.hinata,

Thanks for reaching to us.

First of all, I am appreciate your patience.

Can you please replicate your issue so I can take a look and provide solutions?

Best Regards,

• This reply was modified 4 days, 16 hours ago by Hung Pham.

Hello,
I will create a clone of the site and show it to you.

Hello Woodmart team,

I hope you’re doing well!

I’m currently customizing my header and I’ve added two additional menu items. As a result, the main navigation menu now wraps to two lines instead of staying on a single row.

I would like to know what’s the best way to optimize the space in the header to keep the entire menu on one line, even with these extra links.

I’ve added a private admin link to my staging site where you can check the current state of the header and the issue live (see private note / hidden field).

Thank you in advance for your help and advice

Best regards,
Cédric M.
Responsable easychr.com

Hi lost.hinata,

Please add the below Custom CSS code to Theme Settings > Custom CSS > Global CSS section:

.whb-col-center .wd-nav {
    --nav-gap: 5px;
}

Regards,

[Author]

Posts