WPML Compatibility

Knowledgebase Docs » UberMenu 3
USEFUL? 15
UberMenu 3

We’ve worked with WPML and implemented all recommended changes from the WPML team to make UberMenu compatible with WPML.

Many users use UberMenu and WPML together to create multilingual menus on their site.

Please see the notes on specific WPML features below.

Menu Syncing

Currently, WPML will not sync UberMenu Menu Item Settings between menus. This means that any menu item settings will need to be transferred manually, and any UberMenu Advanced Items will need to be removed and re-added manually in the translated menu. We’re currently discussing with the WPML team whether it will be possible to have the WPML Menu Synchronization system transfer UberMenu Item Settings as well.

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-level-0.ubermenu-wpml-ls-item > .ubermenu-submenu{
	width:60px;
	left:auto;
}
.ubermenu .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]