RTL Languages Support in Multilingual Wix Menu

Ask the community
,
1

When I build the site in English for example and translate it to Arabic which is an RTL language, I can’t set the menu buttons to be opposite in direction to the English ones, and when changing the direction in one language it gets changed in both languages. Also I would want to change the logo position to be on the right for Arabic and left for English for example.

1314×734 157 KB

6 Likes
2

I also want this feature!

3

please make this possible ASAP

4

Very Urgent, we hope that wix team is on this

5

Please make this feature possible!

6

Hi,
Assuming that you’re asking about menu direction when using Wix Multilingual, there’s a nice solution which requires just a bit of coding and can be leveraged to achieve the desired result.

The idea is as follows - you add 2 menu components to your site, one which displays tabs from from right-to-left (for Arabic / Hebrew) and another which displays left-to-right (for English, etc.).

Then, you show / hide each of the menus based on the language selected by the site visitor:

import wixWindow from ‘wix-window’;

$w.onReady(function () {
if (wixWindow.multilingual.currentLanguage === ‘he’) {
$w(’ #horizontalMenu2 ‘).hide();
$w(’ #horizontalMenu1 ‘).show();
} else {
$w(’ #horizontalMenu1 ‘).hide();
$w(’ #horizontalMenu2 ').show();
}
});

Hope this helps.

Jacob

7

@jacobk Thanks!

8

Hi Jacob,
This looks like a nice solution indeed. However I do not understand the following:

  1. How do I add 2 menu components?
  2. Where do I need to add the code?
    Can you please expand on these points?
    Thanks
9

Hi Eyal,

  1. See here how to add a site menu component to your site - https://support.wix.com/en/article/adding-a-site-menu . Note that you are not limited to just one, you can add multiple site menu components to a site.
  2. The code should be added either to all of the site or to a specific page using Corvid. You can find some more info on the differences between site level code (i.e. for all site pages) and page level code and by that you should be able to induce which of the two is right for your case.
    https://support.wix.com/en/article/corvid-working-in-the-code-panel .

Hope this helps.
Jacob

10

Thanks for the post Jacob. I was finally able to do it thanks to the description you gave. I am assuming most people were able to change the menus, but if not then let me know so that i can write a step by step guide.

11

No need as there is already one for it, which is where Jacob got the code for it.

See here.
https://support.wix.com/en/article/corvid-tutorial-changing-the-direction-of-menu-tabs-based-on-the-current-language

12

@jacobk Hello Mr Jacob
I followed the steps in the links you’ve shared. But unfortunately I just have the
horizontalMenu2 showed for both languages, and as result the direction of the menu did not changes. but what changed when i am choosing the language from its bar is only the language not the direction. Please help me in this.

13

Hi @abd-984 , can you share a link to your site so I can take a look and see if I can help?

14

where can I add this code?

15

Hi @waleedtaleb77 ,
This code should be added either in a page’s code panel or the site’s code panel, depends on the where your site menu appears. Take a look here:
https://support.wix.com/en/article/corvid-tutorial-changing-the-direction-of-menu-tabs-based-on-the-current-language#coding-the-redirection-of-menu-tabs-1

16

Hi , this solutions works very well for the menu , but how we can handle the same situation with forms > ? ( the send button something needs to be to the right and sometimes to the left , the alignment of the fields etc ( this question mainly regarding to one line form as attached ) the translation works but not the right alignment

2858×366 64.9 KB

Thanks!

17

Hi @yael-benjamin ,
You can basically use the same technique used for site menus. The only difference is that you can’t control through the component settings panel the direction of the form.
Therefore, what I suggest you’ll do is create two forms (one for Hebrew and another for English), place them one on top of the other, and design yourself the internal layout of each form as you wish it to be (RTL for Hebrew and LTR for English). Then, just show/hide each of the two forms based on the language currently presented in the site, similarly to what you’re leveraging in the menus case.
Hope this helps.

18

Hi Jacob, I’ve tried to check your solution but the form has 2 iDs for one form some how(??) ( see attached so im not sure what to do and I’ve tried to use them both separately but its not working ( getting error message that there’s no ID ) Thanks!

460×628 18.2 KB

19

I also want to know how to change font-style of buttons in the other language because when I change the font-style of a button it change in the both language the Arabic and English

20

Hi, @jacobk
I also want to know how to change font-style of buttons in the other language because when I change the font-style of a button it change in the both language the Arabic and English