Off Canvas Panel – Logo Centered On Top

Hi there,

Can you disable the caching plugin and Autopimize so I can take a closer look at the code?

Hi Leo,
I disable all the cache plugin.

Try this:

.inside-navigation .custom-logo-link {
    margin-left: auto;
    margin-right: auto;
}

Thank you Leo, great it is working fine!

But the menu are not aligned well duo to this code:

/* Off-canvas menu styles */
.slideout-navigation.main-navigation .main-nav ul li a, .slideout-navigation button.slideout-exit {
    text-align: right;
}

if a kept it "right" the RTL working fine and all the menu is set to right, but the LTR menu is also setting to the right and vice versa.

Sorry so what happens if you remove that code?

Hi

The first image showing the mobile menu in the English language:

it is not aligned well as it must be on the left side.

Here, Arabic menu:

The items here looking well as it is aligned to the right except that the menu itself is on the left.

Icons Alignment:

Icons are not arranged well

Hi there,

Try this, instead:

/* Off-canvas menu styles */
.rtl .slideout-navigation.main-navigation .main-nav ul li a, 
.rtl .slideout-navigation button.slideout-exit {
    text-align: right;
}

As for the menu bar, try this:

.rtl .mobile-bar-items {
    position: relative;
}

.rtl .main-navigation:not(.slideout-navigation) .mobile-bar-items+.menu-toggle {
    text-align: right;
}

Hi Tom,

Amaizin, it is fixed! except for the slideout of the Off-Canvas menu. In both cases, it is stick on the left side.

For that, you can do this:

add_filter( 'option_generate_menu_plus_settings', function( $settings ) {
    if ( is_rtl() ) {
        $settings['slideout_menu_side'] = 'right';
    }

    return $settings;
} );

Thank you Tom, it has been solved.

You're welcome :)