Skip to content

Instantly share code, notes, and snippets.

@wplit
Created December 3, 2020 07:06
Show Gist options
  • Select an option

  • Save wplit/d1b906df8c52e782009e66ab3eb5e6b0 to your computer and use it in GitHub Desktop.

Select an option

Save wplit/d1b906df8c52e782009e66ab3eb5e6b0 to your computer and use it in GitHub Desktop.
Make offcanvas appear from bottom of page, with custom width. (set offcanvas to slide from left or right, so you have access to the width control)
/* replace #-off-canvas-3-450 with your offcanvas ID */
#-off-canvas-3-450 .offcanvas-inner {
left: 50%;
}
#-off-canvas-3-450 .offcanvas-inner.oxy-inner-content {
transform: translate(-50%,100%);
-webkit-transform: translate(-50%,100%);
display: block; /* depending on form, to prevent flex overflow issues */
}
#-off-canvas-3-450.oxy-off-canvas-toggled .offcanvas-inner {
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
body.oxygen-builder-body #-off-canvas-3-450 .offcanvas-inner.oxy-inner-content {
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment