Off Canvas Panel – Logo Centered On Top

[Omar]

Hello there, I followed the instructions at this topic

It is working fine except for the alignment and size of the logo. as it is stuck to the right of the off-canvas menu. add to the all the menu items in RTL is aligned to the left.

try to change the text-align at the following code, it is fixed in Arabic (RTL) but it is also applied to English at the same time.

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

[Leo]

Hi there,

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

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

[Omar]

Hi Leo,
I disable all the cache plugin.

[Leo]

Try this:

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

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

[Omar]

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.

[Leo]

Sorry so what happens if you remove that code?

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

[Omar]

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

[Tom]

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

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

[Omar]

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.

[Tom]

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

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

[Omar]

Thank you Tom, it has been solved.

[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

[Author]

Posts