Archived topic
Sidebar problems when translating from LTR to RTL
1 reply · Started by Ben on July 11, 2022
Hi, I have ENG (LTR) site which I am adding Arabic translation (RTL).
When using layout options, eg in Elements, the layout is set to "Sidebar / Content" . In ENG this would be sidebar on left, then content on right. In Arabic this should be sidebar on right.
However, I'm seeing
<div class="widget-area sidebar is-left-sidebar" id="left-sidebar">
<div class="inside-left-sidebar">
...on Arabic site. Now this would actually work, if it wasnt for the following rule being added in /wp-content/themes/generatepress/assets/css/main-rtl.min.css
.both-left #left-sidebar, .both-sidebars #left-sidebar, .left-sidebar .sidebar {
order: 10;
}If this wasnt in there, then the actual RTL direction would take care of the sidebar, and have it on the right (eg Sidebar / Content)
Any ideas on why I'm getting this conflict? And how to best resolve?
I'm using WPML to handle translation.
Thanks
Ben
Hi Ben,
We add that CSS as most users prefer the sidebar to stay the same side for all languages.
You can try this CSS to override it:
.rtl.both-left #left-sidebar, .rtl.both-sidebars #left-sidebar, .rtl.left-sidebar .sidebar {
order: -10;
}