CODEWITHSUNDEEP
cssresponsive-designzurb-foundation
JThree
JThree

Reputation: 2496

Foundation 5 off-canvas transformation

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:

enter image description here

Upvotes: 5

Views: 1208

Answers (2)

LauriE
LauriE

Reputation: 87

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

Upvotes: 1

tzi
tzi

Reputation: 9459

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.

Upvotes: 4

Related Questions