- This topic has 7 replies, 2 voices, and was last updated 6 months, 1 week ago by
Tom.
-
AuthorPosts
-
July 10, 2020 at 5:47 pm #1359625
Zviel
Hi,
I want to use the “Navigation as Header” feature, but it doesn’t seem to be working very well for RTL languages.
Note that if I want the navigation bar to be on the right side, the “Navigation Alignment” field should be set to “Left”.
On the other hand, setting the field to “Right” will place the navigation bar on the left side (by the way – the site language was set to Hebrew. Only the admin UI language was set to English).In addition, in comparison to LTR languages, it seems like there is almost no spacing between the logo and the links in the menu. That doesn’t seem to be the case for LTR languages.
Furthermore, it looks like the “Navigation Alignment” field setting also affects the logo, not just the links on the menu. Is this also the case for LTR languages?
An example: Screenshot 2
Here The logo is aligned to the center along with the links. I would expect the logo to remain on the right side of the navigation bar.
This might be another problem. Here the logo is aligned to the left along with the hamburger icon of the mobile menu. Again, I would expect the logo to remain on the right side of the navigation bar.
I would greatly appreciate your help!
How can I achieve the behavior I expect to see for RTL languages?
Will it be easier to move the logo to the left and the menu to the right, to both desktop and mobile screens (as in LTR languages)?I would love to get solutions from you to both questions (and I understand, of course, that the solutions will be different from each other).
Thanks in advance,
ZvielJuly 11, 2020 at 10:12 am #1360232Tom
Lead DeveloperLead DeveloperHi there,
We’ve fixed a lot of these RTL issues with the navigation as header option in 1.11.0, which we’re hoping to release as an alpha version this upcoming week.
The nav alignment options need to be hidden when navigation as header is set, as they don’t really apply to the style of the option.
What you can do for now is:
1. Set your navigation alignment to “right”.
2. Add this CSS, which is what we added in 1.11.0, so you can remove it when you update:.rtl .navigation-branding, .rtl .site-logo.mobile-header-logo { margin-right: 10px; margin-left: auto; } .rtl .navigation-branding .main-title { margin-right: 0; margin-left: 10px; } .rtl .mobile-header-navigation .navigation-branding .main-title { margin-left: 0; margin-right: 10px; } .rtl .main-navigation:not(.grid-container):not(.mobile-header-navigation) .inside-navigation.grid-container .navigation-branding { margin-left: auto; margin-right: 0; }
Does that make a difference?
Let me know π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentJuly 11, 2020 at 11:08 am #1360286Zviel
Hi Tom,
Thanks for the response!
The CSS is working very well for desktop screens, and as I would expect.
However, it is not working for tablet and mobile screens.Thanks again,
ZvielJuly 11, 2020 at 3:05 pm #1360419Tom
Lead DeveloperLead DeveloperAh sorry about that – try this as well:
@media (max-width: 1110px) { .rtl #site-navigation .navigation-branding, #sticky-navigation .navigation-branding { margin-left: auto; } .rtl .site-logo.mobile-header-logo { margin-left: auto; margin-right: 10px; } }
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentJuly 11, 2020 at 3:44 pm #1360445Zviel
Hey Tom,
Now the navigation bar is working well and as expected for tablet screens, but still not for mobile screens.
Thanks a lot,
ZvielJuly 12, 2020 at 9:36 am #1361061Tom
Lead DeveloperLead DeveloperAdjusted the CSS above to fix that π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-developmentJuly 12, 2020 at 9:46 am #1361079Zviel
Thank you Tom, now everything is working great!
So should I delete all of this CSS in the next update of GP?Zviel
July 12, 2020 at 10:06 am #1361104Tom
Lead DeveloperLead DeveloperYes, GPP 1.11.0 should take care of all of this automatically π
Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development -
AuthorPosts
- You must be logged in to reply to this topic.