diff --git a/main.ts b/main.ts
index 0140522..e3fb26a 100644
--- a/main.ts
+++ b/main.ts
@@ -4,7 +4,7 @@ import { setupInfoButton } from "./ts/info-menu";
 import { initializeMap } from "./ts/map";
 import "@fontsource/ubuntu/latin.css";
 import { setupLegend } from "./ts/legend";
-import { setupEmergencyButton, setupResetButton, setupHeaderButton } from "./ts/buttons";
+import { setupEmergencyButton, setupResetButton, setupHamburgerButton } from "./ts/buttons";
 import { addGoatCounter } from "./ts/goatcounter";
 
 document.addEventListener("DOMContentLoaded", () => {
@@ -14,7 +14,7 @@ document.addEventListener("DOMContentLoaded", () => {
 	setupLegend();
 	setupEmergencyButton();
 	setupResetButton();
-	setupHeaderButton();
+	setupHamburgerButton();
 
 	if (import.meta.env.VITE_QUEER_LEXIKON_PRIVATE === "true") {
 		addGoatCounter();
diff --git a/ts/buttons.ts b/ts/buttons.ts
index 7fb1269..ed6c3f8 100644
--- a/ts/buttons.ts
+++ b/ts/buttons.ts
@@ -17,10 +17,16 @@ export const setupResetButton = () => {
 	});
 };
 
-export const setupHeaderButton = () => {
-	const btn = <HTMLButtonElement>document.getElementById("header-button");
+export const setupHamburgerButton = () => {
+	let isOpen = false;
 	const header = <HTMLElement>document.getElementById("mobile-header");
-	btn?.addEventListener("click", () => {
-		header.classList.toggle("max-md:hidden");
-	});
+	const hamburger = <HTMLButtonElement>document.getElementById("hamburger-button")!;
+
+	document.querySelectorAll<HTMLButtonElement>(".js-header-button").forEach((btn) =>
+		btn.addEventListener("click", () => {
+			header.classList.toggle("max-md:hidden", isOpen);
+			hamburger.classList.toggle("hidden", !isOpen);
+			isOpen = !isOpen;
+		}),
+	);
 };