In the "How to Add More Languages to a Joomla Site", you learned to use the power of Associations.
You mastered how to link articles together to take your Joomla article visitor from one language version to another.
In this tutorial, you will go a step further. You will learn how to offer your visitor menus in two languages as well. This will enable you to offer them the smoothest and most reliable multilingual experience.
When the visitors clicked on the flags on the front end of your site, they were taken from one version of the article to another.
If they would click on the British flag, they would get the English version of the article. If they would click on the French flag, they would get the French version:
However, the process is not entirely complete yet. You will notice that even though you are looking at the French version, you still see "About Us" up in the main menu of the site. That is what you are going to fix in this tutorial.
How to Translate Joomla Menus
Go to the admin area of the site and click "Menus". You will see that you have an English and a French menu set up. We are going to use these menus to show different menu links to different visitors.
You're going to make the English menu visible when people are looking at your site in English. You're going to make the French menu visible when people are looking at your site in French.
- Go to "Extensions", then "Modules".
You will notice that there are three menu modules available.
- Main Menu: This is the menu that you have been looking at so far throughout the previous tutorial.
- Main Menu en-GB
- Main Menu fr-FR
What you are going to do is unpublish the default Main Menu, because it is not needed in the English or French version of the site.
Instead, you are going to put the English menu and the French menu up to the top, in the module area "position-1".
- Edit the "Main Menu en-GB" module.
- Position: position-1
- Click "Save & Close".
You need to repeat that process for the "Main Menu fr-FR" module as well.
- Edit the"Main Menu fr-FR" module and choose "position-1".
- Click "Save & Close".
Now, if you visit the front of the site, you see that French viewers will see "Accueil" in the main menu bar and English viewers will see "Home".
You are not 100% there because a little bit of design and a little bit of CSS is missing from the menu. Some of the default Main Menu settings are missing from your new menus.
- Go back to edit the "Main Menu en-GB" module.
- Click the "Advanced" tab.
- Menu Class Suffix: " nav-pills". Don't forget the extra space at the beginning.
- Module Class Suffix: remove "_menu" to leave this field blank.
- Repeat the process for the French language menu.
- Remove "_menu" from the "Module Class Suffix" field and put " nav-pills" into the "Menu Class Suffix" field.
If you go back to the front of your site, you should see that rounded corners are now available for your menu links.
Click on the French flag, and you should now see that the menu has been successfully translated. Not only is the article in French, but the menu links are in French too now.
Creating Association for Menus
One thing you may be asking at this point is why we haven't done an Association? That is a great question.
It is not absolutely essential to have an Association for every single part of the site. You can see that the translation works without an Association for the menu.
However, it only works because you have an association for the article already. My advice is to try and use Associations wherever you possibly can.
That will produce the smoothest effect for your users. There may be some times in which you don't actually have a version for the content in both languages. In that case, it is acceptable to skip it.
But for now, I am going to recommend you create an association for your menu links too.
- Go back to "Menus" and the "English menu".
Notice that the "About Us" menu item does not have a specified language. This can cause confusion.
For example, if you don't specify a language, you can click the "Associations" tab and choose both a French and English language version.
To eliminate that confusion, we recommend that you get in the habit of always specifying the language when creating categories, articles, menu links and other items in Joomla.
Let's follow our own advice, and specify the language for this menu link:
- Click on the "Details" tab.
- Set the "Language" option to "English (en-GB)".
- Go back to the "Associations" tab. Make sure that Joomla is no longer offering you the ability to choose an English version of the menu link.
- Create an Association to the "À propos de nous" article, as shown in the image below.
- Click "Save & Close".
Now you have an Association between "À propos de nous" and "About Us" at the article level and at the menu level as well. That is going to produce the most reliable multilingual experience for your visitors.
Additional Reading
- Introduction to Joomla Multilingual Sites
- 3 Different Approaches to Multilingual Joomla Sites
- Installing a New Multilingual Joomla Site
- What are Multilingual Associations in Joomla?
- How to Create a Multi-Lingual Sitemap with OSMap
What's Next?
Would you like to learn more about Multilingual Joomla? Join the Joomlashack Everything Club and instantly download the "Multilingual Joomla Explained" book by Igor Muhaljko and Steve Burge.