Archived topic
Width of off canvas menu overlay, and how to stop the menu itself from sliding
2 replies · Started by Craig on January 10, 2022
GP Support, thank you in advance.
1) Anyway to widen the overlay menu (slides in from right)? Want to widen it a bit to accomodate a simple form I am putting below the menu via a hook.
2) Anyway to stop the menu itself from sliding around? I'm sure there is a more technical term, but it kinda moves all over the place.
Thanks for an amazing product,
Craig
Ok, so I found a solution that is almost there from this Leo link:
https://generatepress.com/forums/topic/off-canvas-panel-width/#post-1043740
But, the 'X' out has disappeared, here is the CSS
.offside--left.is-open, .offside-js--is-left .offside-sliding-element {
-webkit-transform: translate3d(360px,0,0);
-moz-transform: translate3d(360px,0,0);
-ms-transform: translate3d(360px,0,0);
-o-transform: translate3d(360px,0,0);
transform: translate3d(360px,0,0);
}
.offside--right.is-open, .offside-js--is-right .offside-sliding-element {
-webkit-transform: translate3d(-360px,0,0);
-moz-transform: translate3d(-360px,0,0);
-ms-transform: translate3d(-360px,0,0);
-o-transform: translate3d(-360px,0,0);
transform: translate3d(-360px,0,0);
}
.main-navigation.offside {
width: 360px;
}
.offside--left {
left: -360px;
}
.offside--right {
right: -360px;
}
.offside-js--is-left.slide-opened .slideout-overlay button.slideout-exit {
left: 380px;
}
Hi Craig,
For #1:
You can try David's CSS here -
https://generatepress.com/forums/topic/off-canvas-width-and-height-changes/#post-1842413
For #2:
You can change the off-canvas entrance animation style to overlay so it doesn't slide in -
https://docs.generatepress.com/article/off-canvas-panel-overview/#style
But this will make the width 100%, meaning it will cover the page entirely when it's open.
To be sure if the solution provided fits, can you link us to the site in question?
