Primary navigation menu not RTL when aligned left

Hi there,

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

Tom,

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

Could you check again, please?

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

Works great! Thanks!

You're welcome :)

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?

Give this a shot:

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

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?

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' ) ) )
    );
} );

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?

Hi there,

try adding this CSS:

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

It works! Thank you, guys!

You're welcome