Skip to content

Add a mega menu with per-item featured content to the primary navigation (develop) - #224

Open
mlaetitia wants to merge 5 commits into
developfrom
add/t51eng-2081-megamenu-develop
Open

Add a mega menu with per-item featured content to the primary navigation (develop)#224
mlaetitia wants to merge 5 commits into
developfrom
add/t51eng-2081-megamenu-develop

Conversation

@mlaetitia

Copy link
Copy Markdown
Collaborator

Related to Linear T51ENG-2081 (no GitHub issue exists for this request).

Proposed changes

  • Revive the osi theme's dormant mega menu: full-bleed dropdown panels for top-level items carrying the megamenu class, rendered by OSI_Megamenu_Walker with a section header row (eyebrow + tagline from the menu item's Description field).
  • Header turns white with a page dim behind while a panel is open; the transparent-until-scroll behavior is kept.
  • Keyboard, touch, and ARIA support; mobile submenu toggle accessibility fixes.
  • New partner-editable featured content card per dropdown: two ACF fields on primary-menu items (a page/post picker and a heading), rendered as a fourth panel column with image, title, and excerpt. Items with no selection keep the plain three-column panel.
  • Field registration and resolution live in inc/megamenu-featured.php. The feature degrades cleanly if ACF is deactivated, only publicly-viewable non-password-protected posts render, and the card image is lazy-loaded so it never consumes the page's fetchpriority=high slot in the header.

Why are these changes being made?

  • The partner asked for a CNCF-style mega menu for the new seven-section navigation structure, including a featured area per dropdown that they can update themselves without code changes (confirmed in the Linear thread). Both the menu structure and the featured content are edited in Appearance > Menus, so the regular menu-building flow covers setup end to end.

Testing instructions

  • Assign a menu to the Primary location with top-level items carrying the megamenu CSS class and nested sub-items.
  • At >= 1200px width, hover or focus a top-level item: the panel opens full-bleed, the header turns white, the page dims; Escape closes it; tab focus and touch behave the same.
  • In Appearance > Menus, expand a top-level item, pick a page or post under "Featured item", optionally change "Featured heading", and save. The panel now shows a fourth-column card (image, title, excerpt) linking to the selection.
  • Clear the field and the panel returns to three columns. Select a draft, private, or password-protected post: no card renders.
  • Below 1200px the accordion behavior is unchanged and no featured card appears.

🤖 Generated with Claude Code

mlaetitia and others added 3 commits July 30, 2026 14:56
…eader and page dim while open, keyboard/touch/ARIA support, and mobile submenu toggle accessibility fixes
…CF fields on menu items

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
@mlaetitia
mlaetitia marked this pull request as ready for review July 30, 2026 18:29
mlaetitia and others added 2 commits July 30, 2026 19:40
…h-stripping thumbnail filter cannot break the lazy image's intrinsic height

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…he code already explains, across the megamenu PHP, SCSS, and JS

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant