Make auto-hide optional

sass/_article.scss

@@ -22,6 +22,13 @@
 	& + #heading {
 		margin-block-start: calc(50vw - 8.75rem);
 	}
+
+	@media only screen and (max-width: 480px) {
+		body:has(&) #site-nav:not(#handle + #site-nav) {
+			margin-block-start: calc(50vw + 1rem);
+		}
+	}
+
 }
 
 #heading {

sass/_nav.scss

@@ -35,30 +35,43 @@
 		transform: none;
 		opacity: 1;
 	}
+
+	& + #site-nav {
+		position: fixed;
+		transform: translateY(-1rem) scale(0.5);
+		transform-origin: top;
+		opacity: 0;
+		transition: var(--transition);
+		margin: 0 auto;
+		width: max-content;
+
+		nav {
+			pointer-events: none;
+		}
+
+		&:hover,
+		&:has(*:focus-visible, *:focus) {
+			transform: none;
+			opacity: 1;
+
+			nav {
+				pointer-events: all;
+			}
+		}
+	}
 }
 
 #site-nav {
-	position: fixed;
+	position: sticky;
 	left: 50%;
-	transform: translateY(-1rem) scale(0.5);
-	transform-origin: top;
-	opacity: 0;
 	z-index: 999;
-	transition: var(--transition);
-	margin: 0 auto;
+	margin: 1rem auto 0;
 	inset-block-start: 1rem;
 	inset-inline-end: 0;
 	inset-inline-start: 0;
 	border-radius: 1.625rem;
-	width: max-content;
 	max-width: min(var(--container-width), 90%);
 
-	&:hover,
-	&:has(*:focus-visible, *:focus) {
-		transform: none;
-		opacity: 1;
-	}
-
 	&::before {
 		-webkit-backdrop-filter: var(--blur);
 		position: absolute;