Cacher is the code snippet organizer for pro developers

/* ------- */

/* Markup */
/*
<nav role="navigation" class="holder">

  <input type="checkbox" id="nav-trigger" class="nav-trigger" />
  <label for="nav-trigger"></label>

  <?php wp_nav_menu( array('menu' => 'Main menu', 'container' => '') ); ?>
</nav>

*/

$small-nav--width: 220;
$menu-icon-size: 24;
$menu-icon-offset: 30; // distance from edge of browser
//$menu-icon-right-margin: 100;

/* When small nav kicks in */
$breakpoint--small-nav: em(800);


/* Hide checkbox */
.nav-trigger {
    position: absolute;
    clip: rect(0, 0, 0, 0);
}


nav[role='navigation']{

/* --------------------------------------------------- */

//  position: relative;

  ul{
      @extend %naked-list;
      position:fixed;
      background: #333;
      top:0;
      height: 100%;
      width: $small-nav--width+px;
      z-index: 3;
  }

    li {
      float:none;
    }

    a {
      display:block;
      padding: 20px;
      color: #EEE;
    }

    a:hover {
      background: #111;
      color: #FFF;
    }

    /* Position side nav off canvas */
    ul {
       right:-$small-nav--width+px; /* match width of nav */
    }

    /* When trigger is checked, move nav into place */
    .nav-trigger:checked ~ ul {
    right: 0;
    }

    label, ul {
      @include transition(right .4s);
    }


  /* menu icon */
  label[for="nav-trigger"] {

    display: block;
    display: flex;
    align-items: center;
    cursor:pointer;
    color: #FFF;
    z-index: 2;
		position: absolute;
    top: 20px;
    right: $menu-icon-offset+px;



    svg {
      margin-right: 6px;
      display: inline-block;
    }

    //Hide menu icon
    @include breakpoint($breakpoint--small-nav){
      display:none;
    }

  }


  /* When checked/open - move menu icon */
  .nav-trigger:checked + label {
    right: $small-nav--width+$menu-icon-offset+px;
  }


  /* --------------------------------------------------- */

      /* Styles for the big nav */
      @include breakpoint($breakpoint--small-nav){

        ul {
        position: relative;
        background: transparent;
        width: 100%;
       display: flex;
       text-transform: uppercase;
       right: auto;
         }

         a {
           display: inline-block;
           padding: 10px;
           margin: 0 5px;

      

               &:hover {
                 color: #FFF;
                 background: transparent;

                 &:after {
                   transform: scaleY(2);
                 }

               }

         }




        /* --------------------------------------------------- */
    }


    /* --------------------------------------------------- */

}



/* Moving logo if side nav opens */

/*     header h1 {
  @include transition-property(all);
  @include transition-duration(.2s);
  @include transition-timing-function(ease);
  @include transition-delay(0);
}

// set width here to be the point at which nav clashes with logo
.nav-open header h1 {
  @include breakpoint(max-width $breakpoint--small-nav){
  opacity: 0.4;
  transform: translate(-190px,0);
    }
}
 */


// JS for adding class

/* $( '[for="nav-trigger"]' ).click(function() {
if($('body').hasClass('nav-open')){
  $('body').removeClass('nav-open');
} else {
  $('body').addClass('nav-open');
}

} ); */