diff --git a/src/assets/icons.svg b/src/assets/icons.svg
index 39616da2d..de4a59153 100644
--- a/src/assets/icons.svg
+++ b/src/assets/icons.svg
@@ -24,7 +24,7 @@
 
     <symbol id="i18n" viewBox="0 0 24 24">
         <path d="M0 0h24v24H0z" fill="none" />
-        <path d="M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z" fill="#fff" />
+        <path d="M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z" fill="currentColor" />
     </symbol>
 
 	<symbol id="link" viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2">
diff --git a/src/components/header/style.module.css b/src/components/header/style.module.css
index 603a3d544..4c9e55a1d 100644
--- a/src/components/header/style.module.css
+++ b/src/components/header/style.module.css
@@ -2,6 +2,8 @@
 	background: #38235c;
 	color: white;
 
+	height: var(--banner-height);
+
 	padding: 0.5rem;
 
 	a {
@@ -29,7 +31,7 @@
 	.open & {
 		justify-content: space-between;
 		-webkit-overflow-scrolling: touch;
-		height: var(--vh);
+		height: calc(var(--vh) - var(--banner-height));
 	}
 }
 
@@ -94,11 +96,7 @@
 	}
 
 	nav {
-		position: relative;
-		display: inline-block;
-		font-size: 100%;
-		user-select: none;
-		-webkit-user-drag: none;
+		display: flex;
 
 		@media (max-width: /* --header-mobile-breakpoint */ 50rem) {
 			display: block;
@@ -185,6 +183,8 @@
 
 		& > a,
 		& > button {
+			display: flex;
+			align-items: center;
 			transition: all 0.3s;
 
 			&::after {
@@ -203,7 +203,7 @@
 
 			& > a,
 			& > button {
-				display: block;
+				display: flex;
 			}
 		}
 
@@ -255,12 +255,6 @@
 			& > button {
 				background: #fff;
 				color: #555;
-				z-index: 101;
-
-				svg {
-					filter: invert(40%) sepia(0%) saturate(3773%) hue-rotate(315deg)
-						brightness(73%) contrast(81%);
-				}
 			}
 
 			nav {
@@ -313,6 +307,8 @@
 	justify-content: space-between;
 	align-items: flex-start;
 
+	touch-action: none;
+
 	@media (min-width: /* --content-width */ 50rem) {
 		justify-content: center;
 		justify-content: flex-start;
@@ -327,14 +323,24 @@
 .translation {
 	position: absolute;
 	height: 2rem;
-	top: calc(var(--vh) - 3rem); /* TODO: Why does bottom not work? */
-	display: flex;
+	display: none;
+	bottom: calc(env(safe-area-inset-bottom) + 1rem);
 	width: 100%;
 	justify-content: space-between;
 	align-items: center;
 
+	@media (max-width: /* --header-mobile-breakpoint */ 50rem) {
+		padding-left: 26px;
+		padding-right: 26px;
+	}
+
+	.open & {
+		display: flex;
+	}
+
 	@media (min-width: /* --content-width */ 50rem) {
-		top: initial;
+		display: flex;
+		bottom: initial;
 		height: 100%;
 		left: initial;
 		position: relative;
@@ -342,6 +348,13 @@
 	}
 }
 
+.translation {
+	@media (max-width: /* --header-mobile-breakpoint */ 50rem) {
+		/* Otherwise overlaps the social items in the dropdown header, blocking use */
+		display: none !important;
+	}
+}
+
 .socialItem {
 	padding: 0 0.5rem;
 }
@@ -399,7 +412,6 @@
 	padding: 18px 23px 12px;
 	line-height: var(--header-height);
 	text-align: center;
-	z-index: 100;
 	opacity: 0.7;
 	cursor: pointer;
 	transition: opacity 250ms ease;
diff --git a/src/components/sidebar/style.module.css b/src/components/sidebar/style.module.css
index 708196afa..ac35e1db1 100644
--- a/src/components/sidebar/style.module.css
+++ b/src/components/sidebar/style.module.css
@@ -21,7 +21,7 @@
 	color: #fff;
 	fill: rgba(255, 255, 255, 0.6);
 	cursor: pointer;
-	z-index: 560;
+	z-index: 460;
 	transition: transform 0.3s;
 
 	&:after {
diff --git a/src/style/variables.css b/src/style/variables.css
index 1bf2b5e2f..d438ecdf8 100644
--- a/src/style/variables.css
+++ b/src/style/variables.css
@@ -1,8 +1,9 @@
 :root {
 	--vh: 100vh;
+	--banner-height: 2.5rem;
 	--header-height: 3.5rem;
 	--header-mobile-breakpoint: 50rem;
-	--header-and-banner-height: calc(var(--header-height) + 2.5rem);
+	--header-and-banner-height: calc(var(--header-height) + var(--banner-height));
 	--content-width: 50rem;
 	--sidebar-break: 900px;