Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment