how do I make horizontal main menu responsive?

Hi David,

Any chance you can link us to the site in question?

You can use the private information field.

Let me know :)

Thanks Ying, here it is

The navigation items being pushed to the second line is simply because there's not enough space when screen shrinks.
https://www.screencast.com/t/EensmeOBG1

But you could give this CSS a try:

.main-navigation ul {
    flex-shrink: 1;
    flex-wrap: nowrap;
    display: flex;
}

Hi Ying, Thanks for this. I pasted your css into additional css and it sort of keeps element on one line, but splits 2 word elements into 2 lines, doesn't look good. Any other options?
Thanks

You have a good amount of menu items there, I don't see an option other than reduce font size and reduce padding around menu items.

Reduce the padding around menu item by adjusting the Menu Item Width at Customizing > Layout > Primary Navigation.

Reduce font at Customizing > Typography > Primary Navigation.

Let me know :)

Thanks Ying, reducing the padding (and your how to) took care of the problem.

Nice, glad it works for you :)