Archived topic
Off Canvas Width
5 replies · Started by Michael on January 25, 2021
I'm in the process of populating the off canvas panel with a couple of menus, etc. and testing with some Flex.
How can I increase the width of the panel that slides out?
Thanks much,
Mike
Hi,
To increase the panel width, you can add this CSS:
nav#generate-slideout-menu.main-navigation.offside {
width: 321px;
}But increasing the width means it may overlap with the close button so we must move the close button as well.
To do that, add this CSS:
.offside-js--is-left.slide-opened .slideout-overlay button.slideout-exit {
left: 321px;
}Thanks Elvin,
That helped with the width but now the menu does not fully retract back. Under layout my off-canvas settings are listed below.
Style: Slide
Side: Right
Close Button: Inside
Menu Item Height: blank
I pulled out all of my custom CSS to make sure its not choking on anything I've added but still see the same result.
You can try Leo's CSS here:
https://generatepress.com/forums/topic/off-canvas-panel-width/#post-1043740
Simply change the values to your preference. :)
Thanks Elvin. Works great! Much appreciated.
Nice one. No problem. :D
