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
165px OR a
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: