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.

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