Link Search Menu Expand Document

Multilingual Menus With WPML

Elemental Menu supports multilingual menus by default. In this article, we use WPML as an example. For a quick tutorial, please check out this video.

Table of Content

  1. 1. The idea
  2. 2. Translate a Menu
  3. 3. Translate a Mega Submenu
  4. 4. Translate a Flyout Submenu

1. The idea

Elemental Menu saves data of menu items by their unique IDs. Meanwhile, WPML creates new menu items with new IDs every time we translate a menu. It means that menu items of a translated menu can’t access the data of the original menu items.

So the idea is that we don’t translate menu items’ data, we create different data for the translated menu items.

2. Translate a Menu

If you don’t know how to translate a menu with WPML, please refer to this article. In this guide, we only show you how to display a translated menu with Elemental Menu and how to translate mega content.

Let’s say we have an Elementor Header Template displaying an original menu in English named English Menu. We also have a translated menu named Spanish Menu:

Translated Spanish Menu

Now, to show the Spanish Menu on every Spanish web page:

  1. Switch to Spanish on the WordPress admin dashboard by selecting Spanish on the WPML dropdown.
  2. Open Spanish version of the Header Template containing the Elemental Menu widget to edit. If the Header Template isn’t translated, please translate it first. If you don’t know, follow this guide to know how to translate an Elementor template.
  3. On the Menu control of the Elemental Menu widget, select the Spanish Menu.
  4. Click “UPDATE” –> “SAVE & CLOSE”. DO NOT add any rules on the “Display Conditions” popup, leave it as default.

Set up Spanish Menu

[NOTICE] After being updated, the Elementor template may disappear on the frontend. This bug has been reported here. If it happens, follow these steps to fix it:

  1. Switch to the default language on the WordPress admin dashboard by selecting the default language on the WPML dropdown.
  2. Open the original version (in default language) of the Header Template to edit.
  3. Save the “Display Conditions” again: “Save Options” –> “Display Conditions” –> “SAVE & CLOSE”.

3. Translate a Mega Submenu

As mentioned before: we don’t translate data, we create different data for translated menu items.

To create a different Mega Submenu for a translated menu item:

  1. Switch to your target language.
  2. Open the translated Header Template.
  3. Edit the target menu item.
  4. Edit the Mega content in that language.

[TIPS] Save the Mega Submenu of the the original menu item as a template then import that template when editing the translated menu item. By doing that, you just need to translate the content without having to rebuild the Mega Submenu from scratch.

4. Translate a Flyout Submenu

Menu items in a Flyout Submenu are translated when translating a menu. You just need to update Icons or Badges if needed. To do that:

  1. Switch to your target language.
  2. Open the translated Header Template.
  3. Edit the target menu item.
  4. Edit the Icon or the Badge however you want.

Last modified: Jan 8 2022 at 06:32 PM.