Even better nav

styles/Blog/Navigation.module.scss

@@ -34,7 +34,7 @@
     .navLink {
         transition: text-decoration 0.3s ease-in-out;
         display: block;
-        margin: auto 5px;
+        margin-right: 10px;
         cursor: pointer;
 
         &:hover {
@@ -44,12 +44,27 @@
 
     .navIcon {
         margin-right: 15px;
-        cursor: pointer;
+        height: 1.8em;
         display: block;
-        height: 2em;
     }
 
-    @media screen and (min-width: 300px) {
+    .navLink .linkIcon {
+        cursor: pointer;
+        height: 1.8em;
+        display: block;
+    }
+
+    .navLink {
+        .linkText {
+            display: none;
+        }
+
+        .linkIcon {
+            display: block;
+        }
+    }
+
+    @media screen and (min-width: 450px) {
         .imgContainer {
             display: block;
         }
@@ -58,6 +73,18 @@
         }
     }
 
+    @media screen and (min-width: 350px) {
+        .navLink {
+            .linkText {
+                display: inline;
+            }
+
+            .linkIcon {
+                display: none;
+            }
+        }
+    }
+
     .spacer {
         flex-grow: 2;
     }