WPML Compatibility

Knowledgebase Docs » UberMenu 3
USEFUL? 24
UberMenu 3

Translating Mega Menus for multilingual WordPress sites

WPML is a plugin that allows you to translate your website content into any number of languages you want. It works on business, portfolio, eCommerce, and any other type of website you might have. WPML gives you the flexibility to translate the site content yourself, work with local translators, or send your website content to be translated by professional translation services.

When translating a site into multiple languages, WPML helps you manage different menus for each language, and this is where UberMenu and WPML compatibility comes into play.

We’ve worked directly with the WPML team to ensure compatibility between the two plugins so that you can use UberMenu and WPML together to create multilingual menus on your site.

Please see the notes on specific WPML features below.

Translating Menus

WPML allows you to set up different menus for each language on your site. You can translate your menus manually, or allow WPML to synchronize your menu content.

Please review WPML’s Menu Translation Guide for further details on basic menu translation.

Translating Custom Menu text

WPML String Translation will allow users to translate custom menu text, such as Custom Link navigation labels.

It is also worth mentioning the Advanced Translation Editor, as it makes the process of translating your website content easier by offering an HTML-free translation experience, automatic translation, a glossary, and more.

Menu Syncing (coming soon in WPML 4.5)

As of UberMenu v3.7.4 and WPML 4.5 (coming soon), UberMenu menu item settings and types should be properly synced between languages when using the WPML sync system. If you are using either earlier versions of either plugin, these settings will not sync and menus will need to be managed independently.

WPML Language Selector

Current Versions

Current versions of WPML allow you to add a switcher to the menu as injected menu items ( WPML > Languages > Menu language switcher ). If you use this option, WPML will dynamically add the language switcher links to your menu. However, they will appear in the default state – horizontally, as a mega submenu.

If you want to display these items in a vertical format, you can add this CSS:

.ubermenu .ubermenu-item.ubermenu-item-level-0.ubermenu-wpml-ls-item > .ubermenu-submenu{
    width:60px;
    min-width:60px;
    left:auto;
}
.ubermenu .ubermenu-item.ubermenu-item-level-0.ubermenu-wpml-ls-item > .ubermenu-submenu > .ubermenu-item > .ubermenu-target{
    padding-top:8px;
    padding-bottom:8px;
}

You can adjust the width property as desired.

Older Versions

WPML has an option to inject language selector HTML directly into the menu. Since this is just an HTML string, rather than an actual menu item, it is not controlled by UberMenu, and therefore will not be styled properly. If you would like to style those items, a good starting point is generally this CSS

.ubermenu .menu-item-language{
    float:right;
    padding:15px 12px;
}

One easy way to add a language selector to your menu is to add a Custom Content menu item and set the language selector shortcode as its content

[wpml_language_selector_widget]