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">
<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 you can offer.