[Resolved] Off Canvas Panel width settings on mobile

[Teris]

What is the best and easiest way to change the width of Off Canvas Panel? I managed to set change the height but setting the width turned out to be a problem. Style is slide and it is set on mobile only.

[Leo]

Hi there,

This should help:
https://generatepress.com/forums/topic/off-canvas-menu-items-behind-overlay/#post-1623738

[Teris]

Hello,

Thank you but I can’t still make it 100% wide on mobile. I managed to make slideout-overlay transparent and the height is now 300 px. Can you check out the CSS? I’ll provide you login details.

[Leo]

Have you considered the Overlay style so it will be 100% width by default?
https://docs.generatepress.com/article/off-canvas-panel-overview/#style

Let me know 🙂

[Teris]

In that case how can I move the close button to the upper left corner? Just like it is when I activate Slide Style.

[Leo]

Any chance you can link me to the page in question?

Thanks 🙂

[Teris]

Will do.

[Leo]

Try this:

@media (max-width: 768px) {
    .main-navigation.slideout-navigation.do-overlay .slideout-exit {
        position: fixed;
        left: 0;
    }
}

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

Let me know 🙂

[Teris]

Works like a charm. Thank You!

[Leo]

No problem 🙂

[Author]

Posts