Local Navigation Bar: Update scroll offset to prevent local nav bar o…

…verlapping content (#597) * Local Navigation Bar: Update scroll offset to prevent local nav bar overlapping content * Use a small offset `scroll-margin-top` for TOC headings
WordPress · Apr 15, 2024 · fa5e370 · fa5e370
1 parent 288f29c
commit fa5e370
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 5 deletions.
diff --git a/mu-plugins/blocks/local-navigation-bar/postcss/style.pcss b/mu-plugins/blocks/local-navigation-bar/postcss/style.pcss
@@ -1,5 +1,5 @@
 /* Set up the custom properties. These can be overridden by settings in theme.json. */
-:where(body) {
+:where(html) {
 	--wp--custom--local-navigation-bar--spacing--height: 60px;
 }
 
@@ -318,8 +318,7 @@
 }
 
 @media (min-width: 890px) {
-	/* stylelint-disable selector-id-pattern */
-	#wp--skip-link--target {
-		scroll-margin-top: var(--wp--custom--local-navigation-bar--spacing--height, 0);
+	html {
+		scroll-padding-top: calc(var(--wp--custom--local-navigation-bar--spacing--height, 0px) + var(--wp-admin--admin-bar--height, 0px));
 	}
 }
diff --git a/mu-plugins/blocks/table-of-contents/postcss/style.pcss b/mu-plugins/blocks/table-of-contents/postcss/style.pcss
@@ -148,6 +148,6 @@
 
 @media (min-width: 890px) {
 	.is-toc-heading {
-		scroll-margin-top: calc(var(--wp--custom--local-navigation-bar--spacing--height) + var(--wp--preset--spacing--20));
+		scroll-margin-top: var(--wp--preset--spacing--20);
 	}
 }