CSS RTL for menu

Need your help experts!
How do I make the hole menu slide from right to left?
I have this so far…
all set for RTL but the menu itself in positioned to the left

I will fix padding etc later…

Thank you for your help

if I understand correctly (what you mean with “hole”), see if this can help you:

[role="navigator"] [role="button"]  {
direction: rtl;
}
[role="navigator"] [role="button"]  >div {
margin-left: 10px;
}

You have to enter it in all detail tabs.
There is the problem that RTL menu will remain in all tabs that are not classified as detail (because you can’t add an RT component there).

1 Like

unfortunately that did not work.
I want the menu to slide from right to the left.

makes no sense having the menu bar on the right (like RTL languages do) but when clicking it at appears on the left.

https://www.loom.com/share/f992d2c91bd24e5082c43a6e6dd46750

Ahhh ok, now I understand
:thinking:I don’t know if it’s possible, I’ll research

1 Like

The best I can suggest for now is this:

[id="flyout-root"] .open [role="aside"] {
left: 18%;
}

But it is not a good solution from my point of view (in the tablet display it is not good, and I don’t think it is good even if you rotate the device horizontally), so I don’t know if it can be useful to You. Try it with caution.

…and if you want the button menu to the right too:

[data-test = "nav-button-menu"] {
position: absolute;
right: 0px;
top: 0px;
}

@ThinhDinh do You can help with this?

1 Like

Apologies, I don’t have a good solution to support this. I imagine you must switch the whole flyout to the right as well, and that’s a pretty problematic thing to do on all devices.

1 Like

I guess I will have to wait till Glide team adds RTL support.
Thank you for your time.

2 Likes

Hi
Did you manage to solve this?
Could you please paste the CSS that you used (even the one from the original post here).
Thanks

Unfortunately no.

Thanks. Can you assist with this small piece of information? It seems that you tweaked the CSS that was previously presented here.

I can try… what is it?

Hi, may I try my way, but it’s not perfect. Is this what you mean?
It works on ios, sadly I don’t have time to continue. Maybe the experts can help further. Thanks.

output-onlinegiftools (1)

<pre><span><style>
/*Hamburger position*/
[data-test = "nav-button-menu"] {
position: absolute;
right: 0px;
top: 0px;
}

[id="flyout-root"] .open {
direction: rtl;
}

div[id*="flyout-root"]  > div [role="complementary"]{
transform: translate(275%);
direction: rtl;
}

div[id*="flyout-root"]  > div [role="complementary"]>div>div>div>div{
margin-left: 5%;
margin-right: 0%;
}

2 Likes

Hi
I meant this code. Can you please share it here?
Thanks

This is really good!
Only thing is when choosing screen the swipe delayed from the left.
But thank you so much.

I dot have it anymore sorry.