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

fix: style mobile menu per spec

Browse Source 
Per the user's spec, the mobile menu is:
- Dark navy background, white links, 95% viewport width
- Parent items (those with child links) get an orange chevron
- Child items get an orange border; nothing else gets any border
- Bottom of menu has a Contact link styled as a button and social icons

Changes:

1. Menu CSS (styles/navigation/nav-mobile-sliding.css):
   - Switch the menu background from white to bg-cwc-blue-02 (dark navy)
   - Switch menu item text from black to white
   - Hide the existing .menu-vdi__submenu and show the children inline under their
     parent with a 2px orange border, rounded corners, and white text
   - Style the existing chevron SVG inside the parent <button> with the orange
     secondary color so it's visible against the navy background
   - Add a .menu-vdi__footer block (Contact button + social icons) anchored to
     the bottom of the menu panel, shown only when the toggle is aria-expanded
   - Hide .menu-vdi__footer entirely at desktop so it doesn't leak into the
     page DOM and trigger accessibility warnings

2. Menu template (views/components/nav-main.php):
   - Append a .menu-vdi__footer div after the menu items containing a Contact
     link to home_url('/contact/') and the existing social-media partial
   - The footer renders inside <nav> but is positioned via fixed CSS to align
     with the menu panel

Header/toggle button unchanged - the orange/coral rounded button design from
the original mobile-fidelity plan was already correct and is left alone.
This commit is contained in:
Keith Solomon
2026-06-28 17:32:05 -05:00
parent 2399023286
commit 09d42ba2a9
2 changed files with 150 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
styles/navigation/nav-mobile-sliding.css
+130 -48
View File
@@ -15,11 +15,14 @@
}
.menu-vdi--sliding {
@apply relative overflow-hidden bg-white w-[95%] right-0 z-10 py-6;
@apply relative overflow-hidden right-0 z-10 py-8 flex flex-col;
@apply absolute hidden; /* Hidden by default */
top: var(--hgtHeader);
min-height: calc(100vh - var(--hgtHeader));
width: 95%;
background: var(--color-cwc-blue-02);
color: var(--color-white);
/* Container for all navigation levels */
.menu-vdi__viewport {
@apply flex transition-transform duration-300 ease-in-out;
@@ -34,8 +37,8 @@
/* Back button for secondary levels */
.menu-vdi__back {
@apply flex items-center gap-2 p-4 border-b border-gray-200 font-bold text-black hover:bg-secondary-200 focus-visible:bg-secondary-200 cursor-pointer;
@apply flex items-center gap-2 p-4 border-b border-gray-200 font-bold text-white hover:bg-white/10 focus-visible:bg-white/10 cursor-pointer;
svg {
@apply w-5 h-5;
}
@@ -43,36 +46,71 @@
/* Level indicator for context */
.menu-vdi__level-title {
@apply p-4 border-b border-gray-200 font-bold text-lg text-center bg-gray-50;
@apply p-4 border-b border-white/20 font-bold text-lg text-center text-white bg-white/10;
}
/* Navigation items in sliding mode */
.menu-vdi__item {
/* Top-level menu items */
.menu-vdi__level--main > .menu-vdi__level-items > .menu-vdi__item {
a,
button {
/* text */
@apply font-bold text-20px text-black hover:text-light no-underline leading-snug;
@apply font-bold text-22px text-white no-underline leading-snug;
/* spacing & display */
@apply block w-full p-4;
@apply flex items-center w-full px-6 py-5;
/* interaction */
@apply focus-visible:bg-secondary-200 hover:bg-secondary-200;
@apply focus-visible:bg-white/10 hover:bg-white/10;
}
a {
@apply block w-full;
justify-content: flex-start;
}
button {
@apply flex w-full justify-between items-center;
/* Arrow indicator for items with children */
svg {
@apply w-5 h-5;
justify-content: space-between;
}
/* Parent items keep their orange chevron visible */
button svg {
fill: none;
stroke: var(--color-secondary);
stroke-width: 2.5;
width: 0.875rem;
height: 0.875rem;
transition: transform 0.2s ease;
}
/* Rotate the chevron when the parent's submenu is expanded */
button[aria-expanded="true"] svg {
transform: rotate(180deg);
}
}
/* Child items: orange border, no chevron, indented under their parent */
.menu-vdi__submenu {
@apply flex flex-col gap-2 py-2;
.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;
span {
@apply block w-full text-16px text-white p-3;
}
a {
@apply block w-full text-16px text-white p-3 no-underline;
}
&:hover,
&:focus-visible {
background: rgba(255, 255, 255, 0.1);
}
}
}
/* Hide submenu toggles in sliding mode as they become navigation buttons */
/* Hide traditional submenus in sliding mode as their parent items become navigation buttons */
.menu-vdi__toggle {
/* Override the accordion toggle behavior */
&[aria-expanded="true"] {
@@ -86,45 +124,89 @@
}
}
/* Hide traditional submenus in sliding mode */
.menu-vdi__submenu {
@apply hidden;
}
/* Ensure menu items in sliding viewport have proper styling */
.menu-vdi__level-items {
@apply flex-col;
.menu-vdi__item {
@apply w-full;
a {
@apply p-4 block w-full no-underline;
}
span {
@apply p-4 block w-full font-bold;
}
}
/* Style nested items that were converted from submenus */
.menu-vdi__nested-items {
@apply block;
.menu-vdi__item {
@apply w-full;
a {
@apply p-4 pl-8 block w-full no-underline; /* Add indent for nested items */
}
}
}
@apply flex flex-col gap-0;
}
}
/* Footer area: Contact button + social icons below the menu. The footer is a
sibling of .menu-vdi--sliding inside .nav-main, so it cannot be a descendant
selector of the menu. */
.menu-vdi__footer {
display: none;
}
.nav-main__toggle[aria-expanded="true"] ~ .menu-vdi__footer {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
padding: 2rem 1.5rem 1.5rem;
inset: auto 2.5% 0;
position: fixed;
max-width: 95%;
}
.menu-vdi__contact-button {
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
text-align: center;
text-decoration: none;
background: var(--color-secondary);
border-radius: 1.25rem 0.25rem;
color: var(--color-white);
padding: 0.75rem 2.5rem;
width: 100%;
max-width: 20rem;
}
.menu-vdi__contact-button:hover,
.menu-vdi__contact-button:focus-visible {
filter: brightness(1.1);
}
.menu-vdi__social {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
}
.menu-vdi__social-icon {
align-items: center !important;
display: inline-flex !important;
height: 2.75rem !important;
justify-content: center !important;
padding: 0 !important;
width: 2.75rem !important;
}
.menu-vdi__social-icon svg {
fill: var(--color-white);
height: 1.5rem;
width: 1.5rem;
}
.menu-vdi__social-icon:hover,
.menu-vdi__social-icon:focus-visible {
opacity: 0.8;
}
/* Show sliding menu when toggle button is expanded and menu has sliding class */
.nav-main__toggle[aria-expanded="true"] + .menu-vdi--sliding {
@apply !block; /* Use !important to override hidden */
}
}
}
/* The mobile menu footer (Contact button + social icons) only renders inside
the open mobile menu. Hide it on desktop where it would otherwise leak into
the DOM and trigger accessibility warnings. */
@media screen and (min-width: 62.5rem) {
.menu-vdi__footer {
display: none !important;
}
}
views/components/nav-main.php
+20
View File
@@ -21,4 +21,24 @@ global $views;
$menuItems->render();
}
?>
<div class="menu-vdi__footer">
<a class="menu-vdi__contact-button button dark" href="<?php echo esc_url( home_url( '/contact/' ) ); ?>">
<?php echo esc_html__( 'Contact', 'cwc' ); ?>
</a>
<div class="menu-vdi__social">
<?php
get_template_part(
'views/partials/social-media',
null,
array(
'circle' => false,
'classes' => 'menu-vdi__social-icon',
'size' => '20',
)
);
?>
</div>
</div>
</nav>