From fa5e3706ba1a4e10141b3aca32738f9d821603ec Mon Sep 17 00:00:00 2001 From: Kelly Dwan Date: Mon, 15 Apr 2024 16:31:19 -0400 Subject: [PATCH] Local Navigation Bar: Update scroll offset to prevent local nav bar overlapping 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 --- mu-plugins/blocks/local-navigation-bar/postcss/style.pcss | 7 +++---- mu-plugins/blocks/table-of-contents/postcss/style.pcss | 2 +- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/mu-plugins/blocks/local-navigation-bar/postcss/style.pcss b/mu-plugins/blocks/local-navigation-bar/postcss/style.pcss index 19ff6bb7a..069a2cc0d 100644 --- 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 index 4a3a324e2..5818e97c7 100644 --- 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); } }