How do I prevent the header's navigation links from overflowing on desktop?

Site URL: https://mis.haus/

In smaller desktop browser sizes, my navigation bar's navigation links overflow into a second row. What CSS can I add so that the hamburger menu for mobile activates before the navigation links overflow?

Thank you to everyone who helps in advance.

https://mis.haus/

5 hours ago, tuanphan said:

You can use a CSS code like this

@media screen and (max-width:1200px) and (min-width:900px) {
.header-burger {
    display: flex !important
}

.header--menu-open .header-menu {
    opacity: 1 !important;
    visibility: visible !important
}

.header-nav,.header-actions {
    visibility: hidden !important
}
}

 

Awesome!

This worked almost right out of the box. I just had to play around with the min-width and set it to (min-width:500px) instead.

Thanks, tuanphan! You're one of the best helpers on this forum.