title: Move mobile nav from left to right
body: <p>I am trying to move mobile navigation from top left corner and slide in from left side to the right side. I've tried to change position settings from left to right, but it didn't work.
  I will really appreciate any help!</p>
  
  <p>Code below, thank you!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#wrapper {
    position: absolute;
    width: auto;
    min-width: 60px;
    height: 100%;
    overflow: hidden;
    margin: 0 auto;
    padding: 0;
  }
  
  label {
    cursor: pointer;
  }
  
  &amp;:focus {
    outline: none;
  }
  
  .menu {
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    width: 240px;
    height: 100%;
    transform: translate3d(-240px, 0, 0);
    transition: transform 0.35s;
  }
  
  label.menu-toggle {
    position: absolute;
    right: -60px;
    width: 60px;
    height: 60px;
    line-height: 0px;
    display: block;
    padding: 0;
    text-indent: -9999px;
    background: transparent url(https://cdn4.iconfinder.com/data/icons/wirecons-free-vector-icons/32/menu-alt-512.png) 50% 50% / 25px 25px no-repeat;
  }
  
  label.active {
    background: transparent url(menu-cross.png) 50% 50% / 25px 25px no-repeat;
  }
  
  ul li&gt;label {
    background: url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-right-b-128.png) 95% 50% / 16px 16px no-repeat;
  }
  
  a,
  label {
    display: block;
    text-align: left;
    padding: 0 30px;
    line-height: 60px;
    text-decoration: none;
    margin: 0 auto;
    color: #000;
  }
  
  &amp;:hover {
    color: #666;
  }
     
  .menu-checkbox{
      display: none;
  }
  
     
  .menu .menu label.menu-toggle {
       background: none;
  }    
  
  .menu-checkbox:checked + .menu {
       transform: translate3d(0, 0, 0);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="wrapper"&gt;
    &lt;input type="checkbox" id="menub" name="menu" class="menu-checkbox"&gt;
    &lt;div class="menu"&gt;
      &lt;label class="menu-toggle" for="menub"&gt;&lt;span&gt;Toggle&lt;/span&gt;&lt;/label&gt;
      &lt;ul&gt;
  
        &lt;li&gt;
          &lt;a href=""&gt;link&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href=""&gt;link&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href=""&gt;link&lt;/a&gt;
        &lt;/li&gt;
  
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;!-- #wrapper --&gt;</code></pre>
  </div>
  </div>
  </p>