how i can reverse transform in css dynamically by js

Question

just i bought a wordpress theme and i make some changes to get a proper experience, so when i turned to body{direction: rtl;} it appears like this enter image description here

so, with 5 hours search about this i found it but i can't handle with the problem this is the file who can't know what's to do

so when i edit this from wordpress css editor... it's still like this when i open side menu notice that in developer tools and this when i close it... enter image description here So what's the problem?

Answer 1

Try to transform: translate(-100%, 0) to completely translate the sidebar out of the screen on x dimention.