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

score 3 · Answer 1 · answered Dec 05 '14 at 16:15

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;
}

score 1 · Answer 2 · answered Apr 11 '16 at 21:18

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.

I'm using the CSS version and would like to dynamically set the menu canvas width to window.innerWidth using JavaScript. How can this be accomplished? — Paul Shryock, Oct 12 '16 at 16:32

score 0 · Answer 3 · answered Jun 18 '16 at 13:15

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;
}

Change width of menu canvas of Foundation

3 Answers3

Linked