Implement pure CSS nav menu

assets/scss/style.scss

@@ -293,6 +293,10 @@ table {
   cursor: pointer;
 }
 
+#menu-btn-checkbox {
+  display: none;
+}
+
 #mobile-menu {
   position: fixed;
   bottom: 4.8em;
@@ -869,6 +873,18 @@ a.footnote-ref {
     display: inline-block;
   }
 
+  label[for=menu-btn-checkbox] {
+    cursor: pointer;
+  }
+
+  #menu-btn-checkbox:not(:checked) ~ #mobile-menu {
+    display: none;
+  }
+
+  #mobile-menu {
+    display: inline-block;
+  }
+
   .posts-group {
     display: block;
 

layouts/partials/header.html

@@ -1,4 +1,4 @@
-	<header id="site-header" class="animated slideInUp">
+	<header id="site-header" class="">
 		<div class="hdr-wrapper section-inner">
 			<div class="hdr-left">
 				<div class="site-branding">
@@ -18,14 +18,15 @@
 				{{- with .Site.Params.social -}}
 				<span class="hdr-social hide-in-mobile">{{ partialCached "social-icons.html" . }}</span>
 				{{- end -}}
-				<button id="menu-btn" class="hdr-btn" title="{{i18n "menu"}}"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg></button>
+				<label id="menu-btn" for="menu-btn-checkbox">&#8803;</label>
+				<input id="menu-btn-checkbox" type="checkbox"/>
+				<div id="mobile-menu" class="animated fast">
+					<ul>
+						{{- range .Site.Menus.main }}
+						<li><a href="{{ .URL | absLangURL }}">{{ .Name }}</a></li>
+						{{- end }}
+					</ul>
+				</div>
 			</div>
 		</div>
 	</header>
-	<div id="mobile-menu" class="animated fast">
-		<ul>
-			{{- range .Site.Menus.main }}
-			<li><a href="{{ .URL | absLangURL }}">{{ .Name }}</a></li>
-			{{- end }}
-		</ul>
-	</div>