WPML Compatibility

Knowledgebase Docs » UberMenu 3
USEFUL? 20
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.

The WPML team has developed a solution that some users have had success with which can be found here: UberMenu WPML Menu Synchronization

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]