Custom responsive navigation

gistfile1.scss

/* small screens */
@media screen and (max-width: 44em) {
  html,
  body {
    margin:0;      
  }

  nav[role="custom-dropdown"] {
    ul {
      display:none;
      height:100%;
    }

    label {
      position:relative;
      display:block;
      width:100%;
      min-height:2.25em;
      padding:.45em;
      font-size:1.1em;
      margin:0;
      border: .15em solid rgba(60, 60, 60, .2);
      background-image: $img_bg;
    }
    
    label:after {
      position: absolute;
      right: .25em;  
      top: 0; 
      content:"\2261";
      font-size:1.8em;
    }
    
    input[type=checkbox]:checked ~ label:after {
      color:#222;
    }
        
    input[type=checkbox]:checked ~ ul {
      display:block;
        
      > li {
        width:100%;
        opacity:.8;
        text-align:left;
    
        &:after {
          position:absolute;
          right:.25em;
          content:"\203A";
          font: bold 1.4em sans-serif;
        }
      }        
    }
  }
}