sass/general.scss

@@ -12,3 +12,7 @@
 	flex-direction: row;
 }
 
+.disable-scroll {
+	overflow: hidden !important;
+	position: fixed;
+}

sass/style.scss

@@ -82,3 +82,37 @@ footer {
 	margin-bottom: 2rem;
 }
 
+.hamburger {
+	display: none;
+}
+
+@media only screen and (min-width: 0px) and (max-width: 1090px) {
+	header {
+		.hamburger {
+			display: block;
+			font-size: 3rem;
+			text-decoration: none;
+			cursor: pointer;
+			user-select: none;
+			z-index: 2000;
+		}
+		.logo {
+			z-index: 2000;
+		}
+		.hamburger:hover {
+			color: white;
+		}
+		.links {
+			display: none;
+			position: fixed;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			z-index: 1000;
+			background: var(--c-gray);
+			flex-direction: column;
+			font-size: 2rem;
+		}
+	}
+}

static/js/mobile-navbar.js

@@ -0,0 +1,22 @@
+const burger = document.querySelector(".hamburger")
+const links = document.querySelector(".links")
+const body = document.querySelector("body")
+
+let shown = false
+
+burger.addEventListener("click", (e) => {
+  e.preventDefault()
+  if (!shown) {
+    links.style.display = "flex"
+    body.classList.add("disable-scroll")
+    burger.textContent = "x"
+  } else {
+    links.style.display = "none"
+    body.classList.remove("disable-scroll")
+    burger.textContent = "☰"
+  }
+
+  shown = !shown
+})
+
+

templates/base.html

@@ -25,6 +25,7 @@
 		<link rel="stylesheet" href="/style.css">
 		<link rel="stylesheet" href="/home.css">
     <script defer src="https://analytics.fofrweb.com/script.js" data-website-id="2b326fdd-6c87-4627-b1f1-d0afb40aeef6"></script>
+    <script defer src="/js/mobile-navbar.js"></script>
 		{% block styles %}
 		{% endblock styles %}
 	</head>
@@ -43,6 +44,7 @@
 						>{{ item.name }}</a>
 						{% endfor %}				
 				</div>
+				<div class="hamburger">☰</div>
 			</nav>
 		</header>