Foundation 5 off-canvas transformation

Question

Is there a way to transform the off-canvas navigation in Foundation 5 to a sidebar navigation? For example the official Foundation 5 docs use visibility classes, but doesn't this kinda defeat the purpose, because of having two separate navigations?

I want to achieve something like this with Foundation 5:

Answer 1

You can do it by overriding the off-canvas CSS rules. Here is a beginning of a solution:

@media (min-width: 700px) {
    .left-off-canvas-menu,
    .right-off-canvas-menu {
        position: static;
        transform: none;
        float: left;
    }
    .move-right > .inner-wrap {
        transform: none;
    }
    .main-section {
        overflow: hidden;
    }
}

You can play with this code on this jsfiddle.

Cheers, Thomas.

Answer 2

The solution is actually much simpler:

@media (min-width: 700px) {
    div.off-canvas-wrap {
      > .inner-wrap {
        @include translate3d($off-canvas-width,0,0);
      }
    }
    div.exit-off-canvas { display: none; }
}