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:
@@ -86,7 +86,7 @@
|
||||
|
||||
.site-header .nav-main__toggle svg {
|
||||
height: 1.5rem;
|
||||
width: 2rem;
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.site-header .nav-main__toggle svg,
|
||||
|
||||
Reference in New Issue
Block a user