From 8855bba8b56b1bb1616df356bf934dd5a1508cfa Mon Sep 17 00:00:00 2001 From: Oscar Merida Date: Mon, 13 Jan 2025 16:27:45 -0500 Subject: [PATCH 01/24] Change the menu bar in guides to align left to line up with the header and minimize horizontal scrolling. --- .../digital.gov/src/scss/new/guides/_guide-menu-bar.scss | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/themes/digital.gov/src/scss/new/guides/_guide-menu-bar.scss b/themes/digital.gov/src/scss/new/guides/_guide-menu-bar.scss index 7bd001f8aa..9043f5b104 100644 --- a/themes/digital.gov/src/scss/new/guides/_guide-menu-bar.scss +++ b/themes/digital.gov/src/scss/new/guides/_guide-menu-bar.scss @@ -7,10 +7,11 @@ align-items: center; background-color: color("gray-10"); height: units(10); - justify-content: center; + justify-content: left; position: sticky; top: -1px; white-space: nowrap; + padding-left: calc(50vw - 32rem); @include at-media("mobile-lg") { display: flex; @@ -31,10 +32,9 @@ &-links { // Fade out overflowing items when scrolling - mask: linear-gradient(90deg, #0000, #000 5% 95%, #0000); + mask: linear-gradient(90deg, #0000, #000 1rem 95%, #0000); overflow-x: scroll; overflow-y: hidden; - padding: 0 units(3); scrollbar-width: none; } @@ -60,8 +60,6 @@ } &.sticky { - justify-content: space-evenly; - .dg-guide__menu-bar-image-container { align-items: flex-end; display: flex; From be8d7a47adc120ded30f79588c27c2eebc048c3d Mon Sep 17 00:00:00 2001 From: Nick Lyons Date: Tue, 14 Jan 2025 14:40:31 -0500 Subject: [PATCH 02/24] Updated markup and classes to be consistent with best practices --- .../partials/core/guides/guide-menu-bar.html | 5 +++- .../src/scss/new/guides/_guide-menu-bar.scss | 26 ++++++++++++++----- 2 files changed, 24 insertions(+), 7 deletions(-) diff --git a/themes/digital.gov/layouts/partials/core/guides/guide-menu-bar.html b/themes/digital.gov/layouts/partials/core/guides/guide-menu-bar.html index 19a2410ce9..d203e0242b 100644 --- a/themes/digital.gov/layouts/partials/core/guides/guide-menu-bar.html +++ b/themes/digital.gov/layouts/partials/core/guides/guide-menu-bar.html @@ -45,7 +45,10 @@ {{- end -}} -