diff --git a/frontend/src/main.less b/frontend/src/main.less
index 0a96c45bcb75f78fc180b46e68e9224f399da65c..829244d33e731379b39772a5e7be202bf13613f9 100644
--- a/frontend/src/main.less
+++ b/frontend/src/main.less
@@ -1,3 +1,6 @@
+// the threshold at which we consider the screen "mobile"
+@mobile_threshold: 700px;
+
 * {
 	box-sizing: border-box;
 	font-family: sans-serif;
@@ -37,21 +40,70 @@ a {
 }
 
 nav {
-	background-color: var(--accent);
+	&, #nav-links {
+		background-color: var(--accent);
+
+		display: flex;
+		justify-content: flex-start;
+		align-items: stretch;
+
+		& > * {
+			margin: 0;
+			padding: 0.5rem 1rem;
+	
+			font-weight: bold;
+			font-size: 1.5rem;
+		}
+	}
+
 	.active {
 		background-color: var(--accent2);
 	}
 
-	display: flex;
-	justify-content: flex-start;
-	align-items: stretch;
+	#title {
+		@media screen and (max-width: @mobile_threshold) {
+			flex-grow: 1;
+		}
+	}
+
+	#burger_checkbox {
+		display: none;
+	}
+
+	#burger {
+		height: 2rem;
+		width: 2rem;
+		padding: 0;
+		margin-right: 1rem;
+
+		flex-grow: 0;
+		flex-shrink: 0;
+		align-self: center;
+
+		@media screen and (min-width: (@mobile_threshold + 1)) {
+			visibility: hidden;
+			display: none;
+		}
+	}
+
+	#nav-links {
+		padding: 0;
+	}
+
+	@media screen and (max-width: @mobile_threshold) {
+		position: relative;
 
-	& > * {
-		margin: 0;
-		padding: 0.5rem 1rem;
+		#burger_checkbox:not(:checked) ~ #nav-links {
+			display: none;
+		}
+		
+		#burger_checkbox:checked ~ #nav-links {
+			position: absolute;
+			right: 0;
+			top: 100%;
 
-		font-weight: bold;
-		font-size: 1.5rem;
+			flex-direction: column;
+		}
 	}
 }
 
diff --git a/schilder2000/templates/_base.html.j2 b/schilder2000/templates/_base.html.j2
index d26615c92569098fccb39959af9b108200b97e2b..b27020f841287ef6c6904d240eb6aebbb6aff584 100644
--- a/schilder2000/templates/_base.html.j2
+++ b/schilder2000/templates/_base.html.j2
@@ -25,9 +25,17 @@
 		{%- block body -%}
 			{%- block nav -%}
 				<nav>
-					<h1>Schildergenerator NEU!</h1>
-					<a {{ maybe_active_href("views.index") }}>Startseite</a>
-					<a {{ maybe_active_href("views.create") }}>Neues Schild</a>
+					<h1 id="title">Schildergenerator NEU!</h1>
+					<input id="burger_checkbox" type="checkbox"/>
+					<label id="burger" for="burger_checkbox">
+						<svg viewBox="0 0 30 30" stroke="white" stroke-width="2" fill="none">
+							<path d="M0,5 H30 M0,15 H30 M0,25 H30"/>
+						</svg>
+					</label>
+					<div id="nav-links">
+						<a {{ maybe_active_href("views.index") }}>Startseite</a>
+						<a {{ maybe_active_href("views.create") }}>Neues Schild</a>
+					</div>
 				</nav>
 			{%- endblock nav -%}