more-modern-mobile-menu.css

header input, header label { display: none }
header nav { /* your desktop navigation css */ }

@media screen and (max-width: 960px) {
    header label {
      display: block;
      width: 20px;
      height: 20px;
      background-image:url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgODggODgiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDg4IDg4IiB4bWw6c3BhY2U9InByZXNlcnZlIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPmNpcmNsZSwgZWxsaXBzZSwgbGluZSwgcGF0aCwgcG9seWdvbiwgcG9seWxpbmUsIHJlY3QsIHRleHQgeyBmaWxsOiAjMzAzNzNiICFpbXBvcnRhbnQ7IH08L3N0eWxlPg0KPGc+DQoJPHJlY3QgeT0iMTIuMyIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9Ijg4LjQiIGhlaWdodD0iOSIvPg0KPC9nPg0KPGc+DQoJPHJlY3QgeT0iNDEuNSIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9Ijg4LjQiIGhlaWdodD0iOSIvPg0KPC9nPg0KPGc+DQoJPHJlY3QgeT0iNzAuNiIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9Ijg4LjQiIGhlaWdodD0iOSIvPg0KPC9nPg0KPC9zdmc+DQo=");
    }
    header nav {
      display: none;
      position: absolute;
      background: white;
      /* your mobile navigation css */
    }
    header input:checked ~ header nav {
      display: block;
    }
}