Merge pull request #16 from lpsinger/fix-usa-nav-dark-hamburger-link-…

…color Use legible foreground color for links in hamburger menus
bruffridge · Jan 2, 2024 · 991eab5 · 991eab5
2 parents 43cc3c1 + 74414da
commit 991eab5
Showing 1 changed file with 17 additions and 9 deletions.
diff --git a/src/theme/_uswds-theme-custom-styles.scss b/src/theme/_uswds-theme-custom-styles.scss
@@ -76,10 +76,18 @@ h1, h2, .usa-display, .usa-logo__text {
         //}
     }
 
-    .usa-logo a, .usa-nav__primary button, .usa-nav__primary>.usa-nav__primary-item>a {
+    .usa-logo a, .usa-nav__primary button, .usa-nav__primary>.usa-nav__primary-item>a, .usa-nav__primary>.usa-nav__primary-item>a:not(.usa-current) {
         color: color('white');
     }
 
+    .usa-nav__primary>.usa-nav__primary-item>.usa-nav__submenu>.usa-nav__submenu-item>a {
+        color: color('white');
+
+        @include at-media($theme-header-min-width) {
+            color: color('ink');
+        }
+    }
+
     &.usa-header--extended .usa-nav {
         border-top: none;
     }
@@ -166,21 +174,21 @@ h1, h2, .usa-display, .usa-logo__text {
     }
 }
 
-.usa-header--extended.usa-header--dark {
+.usa-header--extended.usa-header--dark .usa-nav__primary-item {
     @include at-media($theme-header-min-width) {
-        .usa-current,
-        [aria-expanded=true],
-        .usa-nav__link:hover {
+        & > .usa-current,
+        & > [aria-expanded=true],
+        & > .usa-nav__link:hover {
             @include nav-border-extended-dark;
         }
     }
 }
 
-.usa-header--basic.usa-header--dark {
+.usa-header--basic.usa-header--dark .usa-nav__primary-item {
     @include at-media($theme-header-min-width) {
-        .usa-current,
-        [aria-expanded=true],
-        .usa-nav__link:hover {
+        & > .usa-current,
+        & > [aria-expanded=true],
+        & > .usa-nav__link:hover {
             @include nav-border-basic-dark;
         }
     }