I am currently working with zurb-foundation 5.3 and, since I am not familiar with scss, I have opted to use the css version of foundation 5.3. Following a basic example for an offcanvas menu from the foundation docs, I noticed that the default width did not suit my needs, so I searched for a solution on StackOverflow to specify a custom width. Everything worked perfectly when the offcanvas content appeared on the left side of the screen.
However, after making some modifications in order for the offcanvas-content to appear on the right side of the screen, the specified width was not applied as expected. Here is the code that is causing this issue:
**** HTML ****
<div class="lorem off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
<!-- on-canvas-content -->
<p>some on-canvas main content here</p>
<!-- off-canvas-content -->
<aside class="lorem right-off-canvas-menu">
<div class="inner-canvas-content">
<p>some off canvas menu or other contents here</p>
</div>
</aside>
<a class="exit-off-canvas"></a>
</div><!-- end inner-wrap -->
</div><!-- end offcanvas-wrap -->
**** CSS ****
.lorem.move-left > .inner-wrap {
webkit-transform: translate3d( 500px, 0, 0);
-moz-transform: translate3d( 500px, 0, 0);
-ms-transform: translate3d( 500px, 0, 0);
-o-transform: translate3d( 500px, 0, 0);
transform: translate3d( 500px, 0, 0);
}
.lorem.right-off-canvas-menu {
width: 500px;
}