- This topic has 33 replies, 6 voices, and was last updated 6 years, 4 months ago by Tom.
-
AuthorPosts
-
August 16, 2017 at 3:05 am #367081Moinuddin
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.August 16, 2017 at 3:32 am #367087MoinuddinHow to have the language switcher also flip the rtl way as the logo is flipped.
August 16, 2017 at 8:34 pm #367685TomLead DeveloperLead DeveloperLooks like you got that working? The language switcher is on the left while in RTL.
August 16, 2017 at 11:55 pm #367750MoinuddinI 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.August 18, 2017 at 12:15 am #368506TomLead DeveloperLead DeveloperAh I see – can you add it as the last menu item and then let me know? I should have a solution for that ๐
August 20, 2017 at 12:22 am #369665MoinuddinThank 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.August 20, 2017 at 12:31 am #369668MoinuddinI 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.August 20, 2017 at 6:26 am #369803arabsworksThis is definitely need a flexible and permanent solution through GP customizer.
https://generatepress.com/forums/topic/rtl-solution-with-gp-customizer/August 20, 2017 at 10:50 am #369925TomLead DeveloperLead DeveloperI’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?
August 20, 2017 at 10:59 am #369931MoinuddinThanks @Tom.
See this website http://mynazaria.com/ in mobile view. Although it is perfectly fine for desktop view. This is gPP latest version.August 20, 2017 at 11:16 am #369947TomLead DeveloperLead DeveloperLooks like you’re wanting to use the mobile header: https://docs.generatepress.com/article/mobile-header/
August 20, 2017 at 9:20 pm #370138MoinuddinYes I got your point…It was because the logo size was larger and mobile header couldn’t arrange its alignment.
Thanks @TomAugust 20, 2017 at 11:53 pm #370184TomLead DeveloperLead DeveloperNo problem ๐
November 21, 2017 at 4:00 am #429691LisaTom 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 goodthis 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
November 21, 2017 at 8:41 am #429956TomLead DeveloperLead DeveloperYour 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; }
-
AuthorPosts
- You must be logged in to reply to this topic.