[Resolved] Positioning the menu on Off Canvas Panel

[Huseyin]

Hi Team

Need help on Positioning the menu on Off-Canvas Panel in the center, I think after the major update this happened, didn’t notice it until today.

[Elvin]

Hi,

The off-canvas panel menu seems to be horizontally aligned center already on my end as shown here:
https://share.getcloudapp.com/YEuQgl96

To clarify: Perhaps you meant vertical center? Let us know. 🙂

A wise man once said:
"Have you cleared your cache?"

[Huseyin]

yeah sorry I mean vertical center

[Elvin]

Add this CSS:

nav#generate-slideout-menu {
    display: flex;
    align-items: center;
}

A wise man once said:
"Have you cleared your cache?"

[Huseyin]

Thanks, Elvin,

The CSS code has done the job.

[Elvin]

Nice one. No problem. 😀

A wise man once said:
"Have you cleared your cache?"

[Ricardo]

Hi,

I tried this css and it makes all the content vertically centered, including the x icon. How can I center the menu items without the x icon?

Thanks!

[David]

Hi there,

can you share a link to your site where we can see the issue ?

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

[Ricardo]

Hi David,

You can check here:

https://wordpress-262052-2437317.cloudwaysapps.com

Maybe I didn’t explain properly. The issue is that if you consider that the x icon is the first element it won’t look centered. The area to be centered should be the area of the menu items, excluding the x icon.

Regards,
Ricardo

[David]

Try adding this CSS:

@media (max-width: 768px) {
    #generate-slideout-menu.do-overlay .slideout-exit {
        position: fixed;
    }
}

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

[Ricardo]

Thanks a lot David.

It looks wonderful.

Regards,
Ricardo

[David]

Glad to be of help!

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

[Author]

Posts