diff --git a/themes/digital.gov/src/js/in-page-navigation.js b/themes/digital.gov/src/js/in-page-navigation.js index 453fd938d2..d0828cbadc 100644 --- a/themes/digital.gov/src/js/in-page-navigation.js +++ b/themes/digital.gov/src/js/in-page-navigation.js @@ -1,3 +1,6 @@ +// Only show the in-page navigation when 3 or more nav items are present on the page +// Only display h2's as the primary nav items and set h3 and h4 sub-items to display: none + document.addEventListener("DOMContentLoaded", () => { const relatedItems = document.querySelector("[data-related-items]"); const inPageNav = document.querySelector(".usa-in-page-nav__nav"); @@ -17,4 +20,15 @@ document.addEventListener("DOMContentLoaded", () => { inPageNavHeader.removeAttribute("tabindex"); relatedItems.before(inPageNav); + + // Hide nav links when they are a child of a ring component + navItems.forEach((item) => { + const targetId = item.querySelector("a").getAttribute("href").slice(1); + const targetElement = document.getElementById(targetId); + + if (targetElement && targetElement.closest(".dg-ring")) { + const newItem = item; + newItem.style.display = "none"; + } + }); }); diff --git a/themes/digital.gov/src/scss/new/shortcodes/_ring.scss b/themes/digital.gov/src/scss/new/shortcodes/_ring.scss index 1eb5f9b71a..9d934d64ca 100644 --- a/themes/digital.gov/src/scss/new/shortcodes/_ring.scss +++ b/themes/digital.gov/src/scss/new/shortcodes/_ring.scss @@ -10,7 +10,7 @@ position: relative; &__title { - $font-size: units(3); + $font-size: units(4); background: color("white"); font-size: $font-size; @@ -23,6 +23,7 @@ h2 { @include u-font("sans", "lg"); + font-size: size("sans", 11); font-weight: font-weight("semibold"); } }