Best way to stop a navigation from wrapping by changing design?

Question

Didn't know whether this was a UI or a UX issue but I have been asked to change our header section so that the navigation items don't wrap to a second line when the user views our site on a smaller device such as a tablet or small laptop.

The site is multi-lingual and also brandable for clients so it's difficult to do this for everyone, but our main language that clients ask for their sites to be set up in is English so if I can get this done for English, I might be able to figure out what to do for other languages.

We have a logo on the left hand side of the header that can be a max-width of 165px OR a max-height of 65px, whichever comes first. On the right we have the users profile which can go to whatever size the users name + profile picture goes to (currently the users profile image is a fixed width of 65px + a margin on the right of 15px to give it some space.

That gives the navigation element around 660px to have space to fit. We have 6 navigational items - one of which is a home icon font - which can all be changed depending on clients requests as to what they want to call the item.

The only thing I can think to do off the top of my head is once the navigation is too big for the 660px container, it goes below the logo and user profile sections.

Does anyone have any best practice tips for what should be done in this situation? I have heard from other UI and UX people that some sites that are multi-lingual have language specific stylesheets that override default properties, is this a good idea?

Here's what we currently have as the navigation design:

Answer 1

I came across a similar situation in the past and the way we tackled it was:

We added a responsive menu solution which transformed into a "hamburger" menu for devices with a smaller resolution. This "responsiveness" can be triggered via media queries in the code.

Now, in your case, I am assuming different clients of your can have different menu at the top, so you need to support for "N" menu items. Other parallel task is to add support for multi-language (where a 6 menu item in English may fit into 660px width and a translated Finish or German version may not.

Tablet and Mobile experience

I think converting a menu to a "hamburger" item for tablet and mobile - is an easy solution. That is done via a media query and enforced regardless of how many items you have in the menu and what language.

Desktop experience

I don't think you can purely rely on a common pattern when to break the menu onto it's own line. We've made this an administrative of an author decision. An author / admin (a human essentially) has the ability (at the language level) to control different layout option for the navigation for each client.

I do like the option you suggested to wrap it onto its own line (any you may want to do that by default to eliminate that configuration step) and if the menu grows, you may want to invest into IA work.