[Resolved] “Navigation as Header” RTL Bugs in GP Premium

Home Forums Support “Navigation as Header” RTL Bugs in GP Premium

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #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.

    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

    #1360232
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #1360286
    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

    #1360419
    Tom
    Lead Developer
    Lead Developer

    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;
        }
    }
    #1360445
    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

    #1361061
    Tom
    Lead Developer
    Lead Developer

    Adjusted the CSS above to fix that 🙂

    #1361079
    Zviel

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

    Zviel

    #1361104
    Tom
    Lead Developer
    Lead Developer

    Yes, GPP 1.11.0 should take care of all of this automatically 🙂

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.