Fixed the mobile menu

css/styles.css

@@ -12,7 +12,7 @@ h1, h2, h3, h4, h5, p {
   margin: 0;
 }
 
-#nav-mini {
+#nav-mini, #nav-ctrl {
   display: none;
 }
 
@@ -322,23 +322,26 @@ h1, h2, h3, h4, h5, p {
 
   #nav-mini {
     background: black;
-    /* display: block; */
+    display: block;
     position: fixed;
     top: 0;
-    left: 2em;
+    left: 5%;
     outline: 0;
     text-decoration: none;
     z-index: 1;
   }
 
-  #nav-mini:active > img {
-    filter: invert(100%);
-    box-shadow: 0 0 0.5em white;
-    color: gray;
+  #nav-ctrl + label > img {
     cursor: pointer;
   }
 
-  #nav-mini:active .menu {
+  #nav-ctrl:checked + label > img {
+    filter: invert(100%);
+    box-shadow: 0 0 0.5em white;
+    color: gray;
+  }
+
+  #nav-ctrl:checked + label + .menu {
     display: block;
   }
 

index.html

@@ -26,7 +26,10 @@
     </nav>
 
     <nav id="nav-mini">
-      <img src="img/menu.svg"/>
+      <input type="checkbox" id="nav-ctrl" checked="false"/>
+      <label for="nav-ctrl">
+        <img src="img/menu.svg"/>
+      </label>
       <div class="menu">
         <a href="#home">Home</a>
         <a href="#about">About</a>