-
Hello GeneratePress Support Team,
I’m using GeneratePress + Generateblocks on a site with RTL content, and I’m trying to achieve the following **only on mobile and tablet** (desktop should remain unchanged):
1. Header layout on mobile & tablet
* Logo aligned to the left
* Mobile menu (hamburger icon) aligned to the right2. Mobile menu text direction (RTL)
* When opening the mobile menu, the menu text should be RTL, meaning:
* Text aligned to the right
* Menu items starting from the right side instead of leftCurrently, the mobile menu layout and/or text direction do not fully respect RTL behavior.
Could you please advise:
* Whether this can be achieved using GeneratePress settings alone, or
* If custom CSS/hooks are required, what the recommended approach would be (ideally scoped to mobile & tablet only)?images:
https://postimg.cc/gallery/drQ0FnVThanks in advance for your help.
Best regards,
Nave -
Hi Nave,
Can you link us to the site? Let me know 🙂
-
Hi Ying,
I’ve added in the private information, I will also need to whitelist your IP address so you’ll be able to see the content.
Thanks! -
Hi Nave,
Try adding this CSS:
@media (max-width: 1024px) { .rtl { #generate-slideout-menu .slideout-menu li { text-align: right; } .slideout-navigation button.slideout-exit { display: flex; } #mobile-header .inside-navigation { flex-direction: row-reverse; } } } -
It worked amazingly, thank you!
-
You’re welcome!
-
Hey there,
One more questions please, in the desktop version how do I make sure the menu is centered, the logo is on the right side and the button is on the left side?
Image:
https://i.postimg.cc/7PnLXN16/Screenshot-2026-01-01-165906.png
Thanks in advance! -
Sure, try adding this CSS:
.rtl.nav-float-left #site-navigation { width: 100%; } .rtl #primary-menu { margin-inline: auto; } -
Worked like a charm, thanks!
-
No problem!
- You must be logged in to reply to this topic.