Change width of menu canvas of Foundation

Question

I am using the framework foundation and is very useful.
I wanted to know how you can change the width of the canvas menu.
Use escusicamente css.
Thank

Answer 1

If you are using the scss version of Foundation it's as easy as changing $off-canvas-width: rem-calc(250); in your settings.scss file.

If you are using css you need to change the width of the .left-off-canvas-menu and .move-right > .inner-wrap transform. I suggest you override specificity by adding a new class to .left-off-canvas-menu and off-canvas-wrap, something like <div class="my-site off-canvas-wrap" data-offcanvas> and <div class="my-site left-off-canvas-menu>

Then CSS:

.my-site.move-right > .inner-wrap {
    webkit-transform: translate3d(newwidth, 0, 0);
    -moz-transform: translate3d(newwidth, 0, 0);
    -ms-transform: translate3d(newwidth, 0, 0);
    -o-transform: translate3d(newwidth, 0, 0);
    transform: translate3d(newwidth, 0, 0);
}

and

.my-site.left-off-canvas-menu {
    width: newwidth;
}

Answer 2

For Foundation 6, I used the following code to change the width of the off-canvas menu (using a variable):

$offcanvas-right-size: 315px;

.is-open-right {
    -webkit-transform: translateX(-$offcanvas-right-size);
    -ms-transform: translateX(-$offcanvas-right-size);
    transform: translateX(-$offcanvas-right-size);
}

.off-canvas.position-right {
  width: $offcanvas-right-size;
  right: -$offcanvas-right-size;
}

I had left and right menus and wanted the right to be smaller.

Answer 3

On an addition to the answer above (Rep blocks comment function) Also made with foundation 6

The thing Lee forgot to address is that the second div is nested into the off-canvas position-left canvas, at least in my code The first class is for the size of the off-canvas menu and the second to also move the content

.is-open-left {
-webkit-transform: translateX(125px);
-ms-transform: translateX(125px);
transform: translateX(125px);
}



.off-canvas-menu{
padding-left:125px;
}