diff --git a/tracker/static/style.css b/tracker/static/style.css
index 3049a3d..94bd8e8 100644
--- a/tracker/static/style.css
+++ b/tracker/static/style.css
@@ -44,34 +44,30 @@ select {
 	border-bottom: 5px solid #08c !important;
 	min-height: 40px !important;
 	padding: 10px 15px !important;
+	overflow: hidden;
 }
 
-#archnavbar ul {
-	display: block;
-	list-style: none;
-	margin: 0;
+#archnavbar #archnavbarlist {
 	padding: 0;
-	text-align: right;
-	font-size: 0;
-	letter-spacing: 0;
 }
 
-#archnavbar ul li {
-	display: inline-block;
+#archnavbarlist li {
+	float: left;
+	display: inline;
 	font-size: 14px;
-	font-family: sans-serif !important;
+	font-family: sans-serif;
 	line-height: 1.4;
 	letter-spacing: 0;
-	padding-top: 14px;
-	padding-right: 15px;
-	padding-left: 15px;
-	margin: 0;
 }
 
 #archnavbarlist li a {
-	color: #999;
-	font-weight: bold;
-	text-decoration: none;
+	  display: block;
+	  padding: 10px;
+	  color: #999;
+	  font-weight: bold;
+	  text-decoration: none;
+	  padding: 14px 15px 6px 15px;
+	  margin: 0;
 }
 
 #archnavbar ul li a:hover {
@@ -83,6 +79,93 @@ select {
 	color: white; !important;
 }
 
+#archnavbarhamburger {
+    display: none;
+}
+
+#archnavbarcheckbox {
+    display: none;
+}
+
+@media screen and (max-width: 820px) {
+	#archnavbar #archnavbarmenu {
+		clear: both;
+		max-height: 0;
+	}
+
+	#archnavbar #archnavbarmenu #archnavbarlist {
+		padding-top: 10px;
+	}
+
+	#archnavbar #archnavbarmenu #archnavbarlist li {
+		font-size: 16px;
+		display: block;
+		width: 100%;
+	}
+
+	#archnavbar #archnavbarmenu #archnavbarlist li a {
+		width: calc(100% - 20px);
+		padding: 7px 15px;
+	}
+
+	#archnavbar #archnavbarhamburger {
+		cursor: pointer;
+		display: block;
+		float: right;
+		padding: 20px;
+		position: relative;
+		user-select: none;
+		width: 10px;
+	}
+
+	#archnavbar #archnavbarhamburger div {
+		background: white;
+		display: block;
+		height: 2px;
+		position: relative;
+		transition: background 0.2s ease-out;
+		width: 18px;
+	}
+
+	#archnavbar #archnavbarhamburger div:before, #archnavbar #archnavbarhamburger div:after {
+		background: white;
+		content: "";
+		display: block;
+		height: 100%;
+		position: absolute;
+		transition: all 0.2s ease-out;
+		width: 100%;
+	}
+
+	#archnavbar #archnavbarhamburger div:before {
+		top: 5px;
+	}
+
+	#archnavbar #archnavbarhamburger > div:after {
+		top: -5px;
+	}
+
+	#archnavbar #archnavbarcheckbox:checked ~ #archnavbarmenu {
+		max-height: 300px;
+		padding-bottom: 10px;
+	}
+
+	#archnavbar #archnavbarcheckbox:checked ~ #archnavbarhamburger > div::before {
+		transform: rotate(-45deg);
+		top: 0;
+	}
+
+	#archnavbar #archnavbarcheckbox:checked ~ #archnavbarhamburger > div {
+		background: transparent;
+	}
+
+	#archnavbar #archnavbarcheckbox:checked ~ #archnavbarhamburger > div::after {
+		transform: rotate(45deg);
+		top: 0;
+	}
+}
+
+
 .navbar {
 	margin: 1.5em 0;
 }
@@ -100,7 +183,7 @@ select {
 	padding: 0 0.5em;
 }
 
-#logo {
+#archnavbarlogo {
 	background: rgba(0, 0, 0, 0) url("archlogo.8a05bc7f6cd1.svg") no-repeat scroll 0 0 !important;
 	background-size: 100% !important;
 	height: 40px !important;
@@ -110,13 +193,27 @@ select {
 	float: left !important;
 }
 
-#logo a {
+#archnavbarlogo a {
 	display: block !important;
 	height: 40px !important;
 	width: 190px !important;
 	text-indent: -9999px !important;
 }
 
+#archnavbarmenu {
+    display: block;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    text-align: right;
+    font-size: 0;
+    letter-spacing: 0;
+    clear: none;
+    float: right;
+    max-height: none;
+    transition: max-height 0.2s ease-out;
+}
+
 #page_footer {
 	font-size: 0.9em;
 	margin: 0 auto;
diff --git a/tracker/templates/base.html b/tracker/templates/base.html
index 6a7f589..31ebf6e 100644
--- a/tracker/templates/base.html
+++ b/tracker/templates/base.html
@@ -8,6 +8,7 @@
 		<title>Arch Linux Security Tracker</title>
 		{%- endif %}
 		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+		<meta name="viewport" content="width=device-width, initial-scale=1">
 		<link rel='icon' href='/static/favicon.ico' />
 		<link rel='stylesheet' href='/static/normalize.css' type='text/css' media='all' />
 		<link rel='stylesheet' href='/static/style.css' type='text/css' media='all' />