[Resolved] Primary navigation menu not RTL when aligned left

[Omri]

Hi guys,

I try to align the logo to the right and the primary navigation menu to the left, but then the menu is no longer in RTL.

Navigation is set as Header and aligned left.

I also added the following CSS:

`
.rtl .main-navigation li {
float: left;
}

Let me know what am I missing.

Thanks!

[Tom]

Hi there,

I’m unable to get your site to load – can you check to make sure it’s all good?

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

[Omri]

Tom,

I edited the link and made sure it’s loading from a few different devices.

Could you check again, please?

[Tom]

Perfect.

So, remove that CSS you mentioned above (float: left), and then add this:

.nav-aligned-left.rtl .main-navigation.has-branding:not(.slideout-navigation) .inside-navigation .main-nav {
    flex-grow: 0;
    margin-right: auto;
}

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

[Omri]

Works great! Thanks!

[Tom]

You’re welcome 🙂

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

[Omri]

Hi Tom,

I made some changes and now my site title floats left on mobile

I wish for the site title to float right and the menu toggle to float left.

(on desktop it looks great)

What should I do?

[Tom]

Give this a shot:

@media (max-width: 768px) {
    .rtl.nav-aligned-left .navigation-branding {
        margin-right: 0;
        margin-left: auto;
    }
}

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

[Omri]

It’s working. But on mobile, the logo is not showing near the title.

I would like the logo to appear on both mobile and desktop.

Should I adjust something?

[Tom]

Typically there isn’t enough space to show both on mobile, but you can insert the logo like this:

add_action( 'generate_inside_mobile_header_branding', function() {
    if ( ! function_exists( 'generate_menu_plus_get_defaults' ) ) {
        return;
    }

    $settings = wp_parse_args(
        get_option( 'generate_menu_plus_settings', array() ),
        generate_menu_plus_get_defaults()
    );

    printf(
        '<div class="site-logo mobile-header-logo">
            <a href="%1$s" title="%2$s" rel="home">
                <img src="%3$s" alt="%4$s" />
            </a>
        </div>',
        esc_url( apply_filters( 'generate_logo_href' , home_url( '/' ) ) ),
        esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) ),
        esc_url( apply_filters( 'generate_mobile_header_logo', $settings['mobile_header_logo'] ) ),
        esc_attr( apply_filters( 'generate_logo_title', get_bloginfo( 'name', 'display' ) ) )
    );
} );

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

[Omri]

Hi Tom, it worked!

Only the logo is to the left of the site-title.

I wish for the logo to be right to the title.

Is it possible?

[David]

Hi there,

try adding this CSS:

.site-logo.mobile-header-logo {
    order: -1;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Omri]

It works! Thank you, guys!

[David]

You’re welcome

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts