[Support request] RTL/LTR sidebar issue

[Joshua]

Hello,

I am using gtranslate.io and currently the sidebars are getting cached differently, sometimes arabic is on left and right, but the biggest issue is the english or the majority of pages are ltr have sidebar now on the left, some on the standard right.

I saw this thread, https://generatepress.com/forums/topic/sidebar-problems-when-translating-from-ltr-to-rtl/ and added the CSS To no avail.

Basically, I want to force all sidebars to be on the right hand side for LTR and RTL languages, any CSS ideas to do this?

Any help I would appreciate it.

Thanks.

[Joshua]

I am no css guru, but would something like this work?

#left-sidebar {
position:right !important;
}
#right-sidebar
{
position:right !important;
}

[David]

Hi there.

tricky one this, as RTL languages flip the logical flow.
This CSS would remove the ordering of the sidebars, so they fall to their default position which is after the Content. So both sidebars would appear on the right in a LTR site. Give that a try and let me know what happens on the RTL.

#left-sidebar,
#right-sidebar {
    order: unset !important;
}

[Joshua]

WoW! I think its working, so far seems ok. Normally it take moments for things to go screwy, I will keep checking.

One thing now, the navigation bar is doing the same, can some CSS be used like the sidebar? right now ltr is rtl and vice versa for navigation, I think if i can work this kink out that may be it fingers crossed.

Thanks David looking forward to next reply.

[David]

You could try this for the navigation:

#site-navigation {
    direction: ltr !important; 
}

[Joshua]

Hmmm that may not work, since it makes RTL look LTR. What I did is just compromise and make my Navigation centered which looks fine, basically now no issues occuring.

I am still testing the sidebars, looks ok so far maybe close this for now.

Thanks for your help.

[David]

Aah ok, now i understand, i am not sure there is a stable solution there. As it kinda requires throwing the opposite CSS at the nav, and you may just end up with the same issue you did with the sidebars.
Whereas that sidebar fix removes the CSS thats aligning them….

Is centered ok ? Happy to take a closer look if you want to put it back to original alignment

[Joshua]

For now, centered is fine. I am just trying to resolve the bulk of the issues so my site doesn’t look an acid trip or making people they going cross eyed hah.

The nav bar is not even stickied, so yeah its not a massive feature of my site either.

But now I got a funnier issue, I can re-open another thread if required.

Basically, arabic, hebrew, persian and urudu the rtl languages have like created a double sided page, imagine opening a book, the right page has the website and the left is blank.

For desktop, it loads the right, but mobile it loads the left and you need to scroll over to find the content, lol. Only happens for RTL.

I think along time ago I figured some CSS that fixed a similar issue, like you had to lock both y and z axis, any ideas? Since I cannot remember, hoping you can help.

Thanks

[Joshua]

hmmm this seems to work

html, body {
overflow-x: hidden;
overflow-y: show;
position:relative;
}

not sure if all is needed or can be cleaned up with something better.

[David]

where would i see the issue ? I checked a few pages ( disabling your CSS in the dev tools ) and i can’t see the issue.

[Joshua]

Hi David

ar.linuxcapable.com
iw.linuxcapable.com
fa.linuxcapable.com

but I added that CSS so the issue does not occur. I can remove it when you have time again, not sure your hours, just do not want to leave that CSS off for long or else Google console will no doubt pop up with errors.

Either way, the original issue is fixed which I am happy as it was the most annoying part, every 2nd page of all languages you had sidebars doing musical chairs.

Thanks for the support.

[Joshua]

Added example screenshot in the private information area, seems to happen on Chromium based browsers even with that CSS I added still issue occuring.

Firefox the CSS I added fixed it, sadly Google chrome is 50% of my visitors, with brave/edge etc chromium making up 15% then the rest is firefox and other misc browsers so really cannot ignore it.

From the screenshot I made you can see the edge on the right the start of the page, when you initially load its full blank, you need to swipe right to get to the full page, i hope this sort of makes sense.

Its doing my head in a bit, funny I cannot even make it occur using mobile view on my browser, just using real mobile browsers seem to occur, iphone and android confirmed from myself and my friends.

Any CSS ideas?

Thanks David.

[Fernando]

Hi Joshua,

I tried viewing your site from my end and couldn’t replicate the issue on a chrome browser on mobile.

I also tested on my personal phone to be sure, and couldn’t replicate it there as well.

Can you try viewing the Arabic, Hebrew, etc. versions of your site on a different device on Chrome to test?

Let us know how it goes.

[Joshua]

Hello,

I did add the following CSS before you visited, which is why you could not re-produce I believe.

html, body {
overflow-x: hidden !important;
overflow-y: scroll !important;
position: relative;
}

This seems to have fixed it, from your tests, mine and a few friends I know that have different mobile,tablet devices works flawless now. Strange CSS issue, but this seems to work so I think we can close this for now.

Thanks again for the initial help David especially with the sidebar issue.

Cheers.

[Fernando]

I see. On behalf of our team, you’re welcome Joshua!

[Author]

Posts