Navbar: fix transparency by overriding --ifm-navbar-background-color variable

MMesch · MMesch · commit 4cca65c5246c · 2026-05-14T14:20:59.000+02:00
diff --git a/src/css/custom.css b/src/css/custom.css
@@ -347,16 +347,17 @@ a.menu__link:active {
 /* Scroll-adaptive navbar */
 .navbar {
   transition: background-color 0.25s ease, box-shadow 0.25s ease;
+  background-color: var(--ifm-navbar-background-color);
 }
 
 html:not([data-navbar-scrolled]) .navbar {
-  background: transparent;
-  box-shadow: none;
+  --ifm-navbar-background-color: transparent;
+  --ifm-navbar-shadow: none;
 }
 
 html[data-navbar-scrolled] .navbar {
-  background: var(--ifm-bg-neutral);
-  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
+  --ifm-navbar-background-color: var(--ifm-bg-neutral);
+  --ifm-navbar-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
 }
 
 /* Home page at top: white links over dark hero */

Original file line number	Diff line number	Diff line change
`@@ -347,16 +347,17 @@ a.menu__link:active {`
`347`	`347`	`/* Scroll-adaptive navbar */`
`348`	`348`	`.navbar {`
`349`	`349`	`transition: background-color 0.25s ease, box-shadow 0.25s ease;`
	`350`	`+ background-color: var(--ifm-navbar-background-color);`
`350`	`351`	`}`
`351`	`352`
`352`	`353`	`html:not([data-navbar-scrolled]) .navbar {`
`353`		`- background: transparent;`
`354`		`- box-shadow: none;`
	`354`	`+ --ifm-navbar-background-color: transparent;`
	`355`	`+ --ifm-navbar-shadow: none;`
`355`	`356`	`}`
`356`	`357`
`357`	`358`	`html[data-navbar-scrolled] .navbar {`
`358`		`- background: var(--ifm-bg-neutral);`
`359`		`- box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);`
	`359`	`+ --ifm-navbar-background-color: var(--ifm-bg-neutral);`
	`360`	`+ --ifm-navbar-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);`
`360`	`361`	`}`
`361`	`362`
`362`	`363`	`/* Home page at top: white links over dark hero */`