“Navigation as Header” RTL Bugs in GP Premium

[Zviel]

Hi,

I want to use the “Navigation as Header” feature, but it doesn’t seem to be working very well for RTL languages.

Screenshot 1

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.

Screenshot 3

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,
Zviel

[Tom]

Hi 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-development

[Zviel]

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,
Zviel

[Tom]

Ah 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-development

[Zviel]

Hey Tom,

Now the navigation bar is working well and as expected for tablet screens, but still not for mobile screens.

Thanks a lot,
Zviel

[Tom]

Adjusted 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-development

[Zviel]

Thank you Tom, now everything is working great!
So should I delete all of this CSS in the next update of GP?

Zviel

[Tom]

Yes, 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

[Author]

Posts