RTL Guide

Knowledgebase Docs » UberMenu 3
USEFUL? 8
UberMenu 3

This guide outlines how to set up UberMenu to work with right-to-left (RTL) languages, including inverting text alignment, column order, and submenu position.

There isn’t a global RTL specific setting for UberMenu, but you can achieve RTL compatibility with the existing settings:

Top Level Item Positions

In the UberMenu Control Panel, you can adjust the Menu Item Alignment to “Right”

Submenu Position

In the individual item settings, you can change the Submenu Position, for example to align to the right edge of the parent item

RTL text alignment and columns

To make the text and columns align right to left instead of left to right, we just need to reverse the floats and text alignment. This CSS is included in UberMenu as of version 3.2, but if you are not using the .rtl class for some reason, the code is provided here for you to add manually. You could add this CSS in your CSS Tweaks if necessary

/* Text RTL */
.rtl .ubermenu,
.rtl .ubermenu .ubermenu-item{
     text-align:right;
}
/* Columns RTL */
.rtl .ubermenu .ubermenu-submenu-type-mega > .ubermenu-column:not(.ubermenu-tabs-group),
.rtl .ubermenu .ubermenu-submenu-type-tab-content-panel > .ubermenu-column:not(.ubermenu-tabs-group) {
     float:right;
}
/* Reverse icon padding */
.rtl .ubermenu .ubermenu-item-layout-icon_left>.ubermenu-target-title{
    margin-left:0;
    margin-right:.6em;
}
/* Move arrows to left */
.rtl .ubermenu-sub-indicators .ubermenu-item-level-0.ubermenu-has-submenu-drop > .ubermenu-target{
    padding-right:20px;
    padding-left:25px;
}
.rtl .ubermenu-sub-indicators .ubermenu-item-level-0.ubermenu-has-submenu-drop > .ubermenu-target:after{
    right:auto;
    left:10px;
}

(Remove the .rtl selector if you are not using the rtl class on your body element)

LTR

RTL