Menu icon Foundation
Off-canvas .position-top on Medium down, .position-left on Large?

Basically what the title says. Is it possible to have off-canvas that's positioned top on small/medium, but then positioned left on Large?

I would have thought this would have done the trick:

HTML

<div class="off-canvas-custom reveal-for-large" id="offCanvas" data-off-canvas>
  <ul class="vertical menu">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
  </ul>
</div>
<div class="off-canvas-content" data-off-canvas-content>
  <div class="grid-container">
    <div class="grid-x grid-padding-x">
      <div class="large-12 cell">
        <h1>Hello World</h1>
        <p class="show-for-small-only">Small</p>
        <p class="show-for-medium-only">Medium</p>
        <p class="show-for-large">Large</p>
        <button class="menu-icon" type="button" data-toggle="offCanvas"></button>
      </div>
    </div>
  </div>
</div>

SCSS

.off-canvas-custom {
  @include off-canvas-base;
  @include breakpoint(medium down) {
    @include off-canvas-position ($position: top);
  }
  @include breakpoint(large) {
    @include off-canvas-position ($position: left);
  }
}

But then the off-canvas disappears on large. Thanks for any insight.

off-canvasposition-topposition-left

Basically what the title says. Is it possible to have off-canvas that's positioned top on small/medium, but then positioned left on Large?

I would have thought this would have done the trick:

HTML

<div class="off-canvas-custom reveal-for-large" id="offCanvas" data-off-canvas>
  <ul class="vertical menu">
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
    <li><a href="#">Link 3</a></li>
  </ul>
</div>
<div class="off-canvas-content" data-off-canvas-content>
  <div class="grid-container">
    <div class="grid-x grid-padding-x">
      <div class="large-12 cell">
        <h1>Hello World</h1>
        <p class="show-for-small-only">Small</p>
        <p class="show-for-medium-only">Medium</p>
        <p class="show-for-large">Large</p>
        <button class="menu-icon" type="button" data-toggle="offCanvas"></button>
      </div>
    </div>
  </div>
</div>

SCSS

.off-canvas-custom {
  @include off-canvas-base;
  @include breakpoint(medium down) {
    @include off-canvas-position ($position: top);
  }
  @include breakpoint(large) {
    @include off-canvas-position ($position: left);
  }
}

But then the off-canvas disappears on large. Thanks for any insight.