[Support request] Sidebar problems when translating from LTR to RTL

[Ben]

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

[Ying]

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;
}

[Author]

Posts