翻译时导航栏延伸到第二行

Question

I'm building a website that is going to be displayed dynamically in either English or Spanish. When in Spanish the words are longer and cause the navigation bar to lap onto a second row.

http://bit.ly/ZZ5Waq

What code do I need to change?

Thanks! -Cullen

EDIT: I would rather not make the font smaller. It's important that it remains the same size in English.

However I am willing to make it smaller/reduce padding in the Spanish version.

Does anyone know how to add CSS styles if the URL of the page has /es/ in it? Preferably with PHP.

Answer 1

You can do lots of things to make the navbar 1 line.

1) Making a smaller font-size or a different font-style that has shorter character spacing.

2) As well, you can try to make the padding within each menu list smaller so that it will fit in.

3) Although you probably wouldnt' want to do this, you could even make the spanish version of the site have different layout width (making the width of the container larger).

There's lots of different ways, you'd just need to change up your codes and see how it looks. It might also very well be the case that you end up going with the 2 lines, or you might just find a way to shorten your menu lists.

Without posting any of your codes, it'll be difficult to help you further.