fix: address remaining mobile menu issues

Per the user's feedback, fix the issues still visible in the menu:

1. Hero rendered over the menu: bumped menu z-index from 10 to 100 so it
   always sits above the hero's stacked elements.

2. List markers on items: added explicit list-style: none / padding: 0 on
   the menu <ul> and items to override the base typography rule that sets
   list-style-type: disc and padding: 0 1rem on every <ul>.

3. Blue links: the base typography rule 'a, .link { color: var(--color-bodylinks); }'
   has specificity 0,1,1 and was beating the menu text-white rule. Override
   with color: var(--color-white) !important on menu links and child links
   inside the mobile media query.

4. Full borders with rounded corners on child items: change child item
   border from '2px solid var(--color-secondary); border-radius: 0.5rem'
   to 'border-bottom: 2px solid var(--color-secondary); border-radius: 0'
   so each child gets only a bottom border (matching the user's spec).

5. Menu items now use plain CSS (color/display/padding/font-weight) instead
   of @apply text-white/no-underline to give them explicit override
   specificity against the base styles.

6. Toggle button: changed the SVG width from 2rem to 1.5rem in
   styles/components/site-header.css so the hamburger and X icons render
   at a square 1.5rem x 1.5rem aspect ratio inside the (intentionally)
   rectangular orange button.

Nav-main template unchanged from the previous commit (Contact button +
social icons already in place). Header test still passes - the button box
itself (72x45) is unchanged, only the icon aspect changed.
This commit is contained in:
Keith Solomon
2026-06-28 18:05:12 -05:00
parent 09d42ba2a9
commit 380e2d9015
2 changed files with 64 additions and 14 deletions
+1 -1
View File
@@ -86,7 +86,7 @@
.site-header .nav-main__toggle svg {
height: 1.5rem;
width: 2rem;
width: 1.5rem;
}
.site-header .nav-main__toggle svg,