Изменить ширину offcanvas-меню, которое должно появиться в правой части экрана

Question

Это касается zurb-фундамента 5.3. Я не знаю, scss, поэтому я использую css версию фонда 5.3. Я следую этому очень простому примеру меню offcanvas из учредительных документов. Это offcanvas-меню, похоже, имеет ширину по умолчанию. Поскольку я хотел использовать custom-width, я нашел решение для SO, которое помогло мне указать custom-width. В этом случае все работало как положено, когда появился контент offcanvas on the left of the screen,

Сейчас. Я сделал некоторые изменения в коде, так как я хотел, чтобы offcanvas-контент появлялся on the right of the screen, Вот код, который не работает. Я имею в виду, что он появляется в правой части экрана, но с шириной по умолчанию, а не с указанной мной шириной.

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

Answer 1

Решил это. Я упустил очевидный факт, что если нам нужно сдвинуть блок слева от экрана, поля станут отрицательными. Что-то вроде ниже в этом случае.

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