Rtl logo and menu position for multilingual site using wpml

Hi there,

Can you link us to the site? Thanks!

Please help me resolve this one...Thank you

I put image in the drive and the url is https://drive.google.com/drive/folders/0B3Ov8q6himDZcUF4aUExaFR0WDA?usp=sharing

Put the file url in a window it will show the image... Actually I don't know how to attach the image file.

url : http://moinuddinwaheed.website/
http://moinuddinwaheed.website/ur/ ( for rtl language )

I have the same issue and would appreciate assistance. The mobile menu (menu-toggle-button) is positioned left instead of Right in RTL page (Arabic) and can't find the string of "Menu" in WPML to translate it to Arabic when switching to Arabic site.

I guess if I'm able to translate the word Menu to Arabic, it would be positioned right correctly.

Using the latest GP theme and premium plugin as a note.

This was actually requested by quite a few RTL members.

However, you can revert it like this:

.rtl.mobile-header-logo .main-navigation.mobile-header-navigation .menu-toggle {
    float: right;
}

.rtl .mobile-header-navigation .mobile-header-logo {
    float: left;
}

In the desktop view also it is not the way it should be...i.e RTL for the logo position. Please resolve this in making for desktop logo position and menu position too.

Your navigation is set to float right. You can flip it by setting it to float left: https://docs.generatepress.com/article/navigation-location/

Yes Tom, When I change it to float left it is then changed for both the languages. I use wpml for my multilingual site. When I click the rtl language flag only then it should (the logo and the menu) flip the rtl way.
Give some code as you have given for the mobile menu that it changes to rtl position only when the rtl language flag is clicked. Thanks for prompt reply..

I am sharing the image

I put image in the drive and the url is
https://drive.google.com/drive/folders/0B3Ov8q6himDZcUF4aUExaFR0WDA?usp=sharing

Dear Tom and Leo,

As you know the menu bar for RTL language home button start from right to left as opposite to LTR which is from left to right , this request you will see from many RTL members so the logic which we hope to help permanently resolve this issue:

1- Setup GP to reflect the direction if ( LTR = English = primary or RTL = Arabic = secondary ) and vice versa.
2- If GP+RTL+WPML active the direction should include (logo - site title - site tagline ) for Desktop - Tablet - Mobile.
3- Preferably better to have the flexibility and possibility to change this from the site identity itself for example ;
- IF RTL logo in the left ( site title - site tagline ) in the right
- IF RTL logo in the right ( site title - site tagline ) in the left.
- Main menu bar for RTL language home button ALWAYS start from right.

What I mean is to have the flexibility and the possibility on doing the above through GP customizer.

With Many Thanks,

arabworks do you have any solution...Please provide me to resolve my queries.
I am working on this a project in which I have completed the english version portion but the arabic one is in pending due to this problem.

Hi Moinuddin,

for the menu try:

.rtl.nav-float-left .main-navigation {
text-align: left;
}

.rtl.nav-float-left .main-navigation li {
direction: rtl;
display: inline-block;
float: none;
}
`

As for wpml arabic text Menu for mobile try the method here:
https://generatepress.com/forums/topic/translate-copyright-footer/#post-226085

Thanks Arabworks. Do I need to put this code inside rtl.css
and what about the logo position that needs to be flipped to the right position on clicking the arabic language flag.
Thanks for your reply. I'm waiting for Tom Usborne's reply for a compact and well managed code.
The best thing about the GP Premium is the support forum.
Love you guys.

The code it has to go to your main GP css file or the child theme if you download the one from here :
https://docs.generatepress.com/article/using-child-theme/

Thanks for providing that code!

CSS can also be added using a plugin: https://docs.generatepress.com/article/adding-css/

To flip the nav/logo on RTL, you can do this:

.rtl .site-logo {
    float: right;
}

.rtl.nav-float-right .inside-header .main-navigation {
    float: left;
    clear: left;
}

@arabsworks - any chance you can start a new topic with those suggestions? I'll absolutely take a closer look at making those changes.

Thanks!