[Resolved] Problem With Slideout Menu and Rtl

[Amos]

Hello. when i am using slideout menu on mobile with rtl i have a bug.
before the page is complete is loading all the content move to the left and after the loading is over is move back to the center.
it is only on real mobile.
i have a test domain to show you :
http://22.idanweb.com/

Thank You.

[Tom]

Thanks for the example, it helps!

Can you confirm this doesn’t happen if you’re not using a RTL language? I’m not immediately seeing why this would happen only on RTL, but I’ll do some more looking into it.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Amos]

Yes Tom. when i change the site language to english it dosent happend. only rtl.
and because this test site is “empty” the bug is tiny and return to the center quickly . but on a real site with content the bug is a big issue

[Amos]

Tom i think i fixed it.
one of them :
1. @media (max-width:768px){

nav#generate-slideout-menu{
display:inline !important;
}

}

2. @media (max-width:768px){

nav#generate-slideout-menu{
position:fixed;

}

}

you can tell me if i will get some error in future to use this css? there is better way to do it?

(edit: i am using design css tool but when i move the code to the css file it dosent work. (what is the correct name of the selector?)

[Tom]

Hmm, not sure how that would fix it, but I’m not sure why RTL would even do anything to the slideout menu.

I would assume the slideout menu should appear from the right side on RTL though, yea? Maybe making that change will fix the issue: https://generatepress.com/forums/topic/reverse-flip-position-of-slideout-menu-right/#post-175356

Let me know 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Amos]

its work but i prefer to keep the slideout from left.
i add this :
.slideout-navigation {
position:fixed;}
.slide-opened .slideout-navigation {
position:fixed;}

And it works well now. Thank You.

[Tom]

Added this to the next version:

.rtl .slideout-navigation {
	position: fixed;
}

Let me know if it works for you or not 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Amos]

i write only this code and it works.

[Tom]

The code I wrote? Awesome 🙂

Thank you!

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts