Foundation 5 off-canvas transformation

css, responsive-design, zurb-foundation

Solution

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.

Problem

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:

Original source