[Support request] Rtl logo and menu position for multilingual site using wpml

[Moinuddin]

Thanks @Tom.
It will definitely solve my issue here but for its permanent settlement for rtl users please have a look at the suggestions @arabworks have raised in the support topic.
Thank you once again.

[Moinuddin]

How to have the language switcher also flip the rtl way as the logo is flipped.

[Tom]

Looks like you got that working? The language switcher is on the left while in RTL.

[Moinuddin]

I have put the language switcher to appear as the last menu. That’s the reason it seems good for the RTL but again see in the LTR for english language it is the first menu, it should be after contact me. It should flip in both the cases.
Moreover I have put the navigation for arabic language in reverse order in the Appearance=>Menu to get right RTL. That should not be the case.
But for now it is okay for my ongoing website. Hope you might be working on some addon so that from the customizer itself one can style separately for LTR and RTL as we do separate editing for mobile, tablet and desktop by elementor.
Thanks @Tom for your dedication and support for GPP.

[Tom]

Ah I see – can you add it as the last menu item and then let me know? I should have a solution for that 🙂

[Moinuddin]

Thank you @Tom for your constant support.
Your code is working perfectly fine for both the languages LTR and RTL for desktop view.
(.rtl.mobile-header-logo .main-navigation.mobile-header-navigation .menu-toggle {
float: right;
}

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

but in mobile menu the logo gets placed above the menu which should not be the case. Earlier in my website moinuddinwaheed.website gpp version 1.4.2 when I put the code

@media (max-width: 768px) {
body:not(.mobile-header-logo) .mobile-header-navigation .mobile-bar-items {
position: absolute;
right: 0;
top: 0;
}
body:not(.mobile-header-logo).rtl .mobile-header-navigation .mobile-bar-items {
left: 0;
right: auto;
}
}

it works for mobile menu but not for the desktop menu.

Now on a test website mynazaria.com
when I put the code
.rtl.mobile-header-logo .main-navigation.mobile-header-navigation .menu-toggle {
float: right;
}

.rtl .mobile-header-navigation .mobile-header-logo {
float: left;
})
and put the language switcher as the last menu It works perfectly fine for desktop view for both RTL and LTR. but in the mobile view, the logo is placed above the menu in latest upgrade 1.4.3.

[Moinuddin]

I think in the latest upgrade 1.4.3 the changes in the layout for desktop for primary navigation and the header location does not take effect for mobile and tablet view.
Above header
Below header
these two are working for mobile and tablet view but not the
float left
float right.

[arabsworks]

This is definitely need a flexible and permanent solution through GP customizer.
https://generatepress.com/forums/topic/rtl-solution-with-gp-customizer/

[Tom]

I’m not sure I’m seeing the issue? The logo is inline with the menu on mobile, and the language switcher is the last menu item on LTR and RTL?

[Moinuddin]

Thanks @Tom.
See this website http://mynazaria.com/ in mobile view. Although it is perfectly fine for desktop view. This is gPP latest version.

[Tom]

Looks like you’re wanting to use the mobile header: https://docs.generatepress.com/article/mobile-header/

[Moinuddin]

Yes I got your point…It was because the logo size was larger and mobile header couldn’t arrange its alignment.
Thanks @Tom

[Tom]

No problem 🙂

[Lisa]

Tom hi
new rtl site , same issue.
I added the css that you gave me for the previous site but it does not work for this site.

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

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

order of primary menu is back to front (wrong)
order of sticky menu is good
order of mobile menu is good

this is the site – https://www.kr-mentoring.co.il/%D7%93%D7%A3-%D7%94%D7%91%D7%99%D7%AA/

this is what is wrong – https://prnt.sc/hdadm9

[Tom]

Your navigation is floating right, so the classes changed a bit:

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

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

[Author]

Posts