diff --git a/_includes/navigation.liquid b/_includes/navigation.liquid
index 3c96e2f..8b566eb 100644
--- a/_includes/navigation.liquid
+++ b/_includes/navigation.liquid
@@ -1,8 +1,10 @@
 <nav>
 	<ul>
-		<li><a class="button" href="/">Home</a></li>
-		<li><a class="button" href="/about">About</a></li>
-		<li><a class="button" href="/blog">Blog</a></li>
-		<li><a class="button" href="/rss.xml">RSS</a></li>
+		<li class="one"><a class="button" href="/">Home</a></li>
+		<li class="two"><a class="button" href="/about">About</a></li>
+		<li class="three"><a class="button" href="/contact">Contact</a></li>
+		<li class="four"><a class="button" href="/donate">Donate</a></li>
+		<li class="five"><a class="button" href="/blog">Blog</a></li>
+		<li class="six"><a class="button" href="/rss.xml">RSS</a></li>
 	</ul>
 </nav>
diff --git a/_scss/_navigation.scss b/_scss/_navigation.scss
index 7a6f721..ce1b5d2 100644
--- a/_scss/_navigation.scss
+++ b/_scss/_navigation.scss
@@ -1,3 +1,4 @@
+@media only screen and (min-width: 600px) {
 nav {
 	max-width: 20cm;
 	margin: auto;
@@ -5,7 +6,6 @@ nav {
 	font-size: 20px;
 
 	ul {
-		max-width: 10cm;
     	list-style: none;
     	margin: auto;
     	padding: 0;
@@ -18,3 +18,29 @@ nav {
 		}
 	}
 }
+}
+
+@media only screen and (max-width: 600px) {
+nav {
+	font-size: 20px;
+	list-style: none;
+	
+	ul {
+		list-style: none;
+
+		padding: 0px;
+		margin: auto;
+		display: grid;
+		
+			grid-template-columns: repeat(3, 1fr);
+			gap: 10px;
+			grid-auto-rows: minmax(50px, auto);
+			align-content: center;
+
+			li {
+				padding: 0px;
+				margin: auto;
+			}
+	}
+}
+}