Solo-Web-Works/CWC
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: address remaining mobile menu issues

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files
styles/navigation/nav-mobile-sliding.css
+63 -13
View File
@@ -15,14 +15,28 @@
}
.menu-vdi--sliding {
@apply relative overflow-hidden right-0 z-10 py-8 flex flex-col;
@apply relative overflow-hidden right-0 py-8 flex flex-col;
@apply absolute hidden; /* Hidden by default */
z-index: 100;
top: var(--hgtHeader);
min-height: calc(100vh - var(--hgtHeader));
width: 95%;
background: var(--color-cwc-blue-02);
color: var(--color-white);
/* Suppress default <ul> bullets and indent inherited from base typography.
The <ul> element IS .menu-vdi--sliding, so we use & to target the parent selector. */
&,
ul.menu-vdi {
list-style: none;
padding-left: 0;
margin: 0;
}
.menu-vdi__item {
list-style: none;
}
/* Container for all navigation levels */
.menu-vdi__viewport {
@apply flex transition-transform duration-300 ease-in-out;
@@ -51,14 +65,30 @@
/* Top-level menu items */
.menu-vdi__level--main > .menu-vdi__level-items > .menu-vdi__item {
list-style: none;
a,
button {
/* text */
@apply font-bold text-22px text-white no-underline leading-snug;
color: var(--color-white) !important;
font-weight: 700;
font-size: 1.375rem;
line-height: 1.375;
text-decoration: none;
/* spacing & display */
@apply flex items-center w-full px-6 py-5;
display: flex;
align-items: center;
width: 100%;
padding: 1.25rem 1.5rem;
/* interaction */
@apply focus-visible:bg-white/10 hover:bg-white/10;
background: transparent;
}
a:hover,
a:focus-visible,
button:hover,
button:focus-visible {
background: rgba(255, 255, 255, 0.1);
}
a {
@@ -85,22 +115,37 @@
}
}
/* Child items: orange border, no chevron, indented under their parent */
/* Child items: orange bottom border only, no chevron, no rounded corners */
.menu-vdi__submenu {
@apply flex flex-col gap-2 py-2;
display: flex;
flex-direction: column;
gap: 0;
padding: 0;
.menu-vdi__item--child {
@apply font-bold text-white no-underline leading-snug;
border: 2px solid var(--color-secondary);
border-radius: 0.5rem;
margin: 0 1.5rem;
font-weight: 700;
line-height: 1.375;
border-bottom: 2px solid var(--color-secondary);
border-radius: 0;
background: transparent;
list-style: none;
span {
@apply block w-full text-16px text-white p-3;
display: block;
width: 100%;
color: var(--color-white);
font-size: 1rem;
padding: 0.75rem 1.5rem;
}
a {
@apply block w-full text-16px text-white p-3 no-underline;
display: block;
width: 100%;
color: var(--color-white) !important;
font-size: 1rem;
font-weight: 700;
padding: 0.75rem 1.5rem;
text-decoration: none;
}
&:hover,
@@ -126,7 +171,12 @@
/* Ensure menu items in sliding viewport have proper styling */
.menu-vdi__level-items {
@apply flex flex-col gap-0;
display: flex;
flex-direction: column;
gap: 0;
list-style: none;
padding: 0;
margin: 0;
}
}