How to change the direction to RTL

Basic informations

By default all new templates based Helix3 template framework have built-in separate CSS styles for Right-To-Left (RTL) direction in languages like Hebrew, Persian and Arabic. In template folder /css - you will find : bootstrap-rtl.min.css, rtl.css and rtl.less file. We use this function, so if your Joomla website is set to a RTL language the Enfold RTL stylesheet will be included automatically. Of course you can build multilingual site on Joomla, with language switcher.

Useful How to Tips:

  • Default Layout Builder in JoomShaper Templates doesn't have separate RTL layout. It means that you have to create your own. First use a Duplicate feature in Templates: Styles section to create template clone of Default Template style, for example "shaper_revibe - Default".
  • Second, inside Layout tab replace positions of logo and menu.
    replace drag drop
  • Then choose different menu for RTL language in Menu tab. Don't forget to Save settings.
    Of course, order of menu items you can change in Menu Manager (Joomla Core Feature). So it shouldn't be a problem to set Home as a last item in the menu row. If this should be your default template set it as a default one.
  • If this RTL template must be for selected language(s) only - please assign this "new" template to those menu items which are used for RTL language.  
  • In Custom Code tab you can use separate css styles to fix small issues with other components or module which do not support RTL.
  • If you want to align menu more to right side, not left side as it's by default, please use following CSS code:
    body.rtl .sp-megamenu-parent { float: right !important; }
    rtl menu


SP Tabs Module

If you're using SP Tabs module and you need to have RTL direction style please use extra two lines of CSS code:

 tab-padding .custom > p { text-align: right; }
ul.tabs_container { float: right !important; }