SW Header Mega — AI Agent Reference Module name: SW Header Mega Module path: smithworks-2025/sw-modules/SW Header Mega.module (smithworks portal); also in master `sw-master` (SW-Dev) SW Category: Global Reference: MODULE-FIELD-LABELING-STANDARD.md, MODULE-SAMPLE-CONTENT-STANDARD.md, ALIAS-MAPPING-STANDARD.md, PROCESS-MODULE-DOCUMENTATION-SYNC.md (complex / chooser modules) Last updated: 2026.10.21.18.09 (top bar phone width, Alignment (Mobile), stacked padding) Use this document when: The user asks about SW Header Mega — when to use it instead of SW Header Simple, Menu Types, custom column stack and layouts, Featured position, Column Chrome, Image Fit and scale, Mega Panels vs Extra Panels, Featured Image Layout vs Image Display, empty Desktop/Tablet Image, Extra Panels / left pane, Override Mobile Menu, or what the phone drawer looks like. Do not swap the live site header unless the user names that theme job. Marketer images (File Manager) — one board per Menu Type (readable on a phone): - Dropdown — https://smithworks.marketing/hubfs/module-documentation/sw-header-mega-mt-dropdown.png - Dropdown + content — https://smithworks.marketing/hubfs/module-documentation/sw-header-mega-mt-dropdown-content.png - HubSpot columns — https://smithworks.marketing/hubfs/module-documentation/sw-header-mega-mt-hubspot-columns.png - Custom columns — https://smithworks.marketing/hubfs/module-documentation/sw-header-mega-mt-custom-columns.png - Custom menu — https://smithworks.marketing/hubfs/module-documentation/sw-header-mega-mt-custom-menu.png - Inside one custom column — https://smithworks.marketing/hubfs/module-documentation/sw-header-mega-column-stack.png - Three custom-column layouts — https://smithworks.marketing/hubfs/module-documentation/sw-header-mega-column-layouts.png - Where Featured sits — https://smithworks.marketing/hubfs/module-documentation/sw-header-mega-featured-position.png - Column Chrome — https://smithworks.marketing/hubfs/module-documentation/sw-header-mega-column-chrome.png - Where the photo sits — https://smithworks.marketing/hubfs/module-documentation/sw-header-mega-where-photo-sits.png - Extra Panels and Featured Style — https://smithworks.marketing/hubfs/module-documentation/sw-header-mega-extra-featured-style.png - On the phone — https://smithworks.marketing/hubfs/module-documentation/sw-header-mega-on-the-phone.png Figma planning: https://www.figma.com/design/ZAtdF3mOTm1Ew87IaZJnJI/Module-Planning-Wireframes?node-id=189-2 Public FAQs: https://smithworks.marketing/faqs (category SW Modules, subtopic SW Header Mega) ================================================================================ 1. OVERVIEW ================================================================================ SW Header Mega is a clone of SW Header Simple plus mega-menu options. Keep SW Header Simple on the live global header (`sw-site_header.html`) until you are ready to swap this module in on a named theme. Do not edit `sw-site_header.html` as part of a Mega-only job. What the visitor sees on desktop: logo, HubSpot menu, optional Extra Panels after the HubSpot items, optional CTA buttons, optional announcement / top bar. Each HubSpot top-level item can open a compact dropdown (Header Simple style) or a mega panel (Featured photo, columns, or a custom rail). Extra Panels are extra top-level items you write in the module — they are not in the HubSpot menu and they never appear in the phone drawer. What the visitor sees on the phone: the same closed bar (logo, one CTA if you show it, hamburger) and the same HubSpot drawer for every Menu Type. Featured photos and Extra Panels stay off the phone. Override Mobile Menu only changes which HubSpot menu fills that list. This module does not ship Outer Animated. ================================================================================ 2. WHEN TO USE MEGA VS HEADER SIMPLE ================================================================================ - Stay on SW Header Simple when the site only needs a logo, HubSpot menu, and buttons (compact dropdowns). - Use SW Header Mega when a top-level item needs a wide panel: Featured photo + copy, HubSpot columns, authored columns, or a custom rail that swaps the right pane. - Do not put Mega on the live header until the user names that theme. QC and first ship use a page-local instance (Z tester), not the global partial. ================================================================================ 3. HOW MATCHING WORKS ================================================================================ 1. Navigation (Menu Selection) picks the HubSpot menu. That menu’s top-level order is the header order. Dragging Mega Panels cards does not change L1s. 2. Each Mega Panels card attaches with Label (must match the HubSpot item name). Match URL is optional backup when names differ — leave it blank if Label already matches. First matching card wins. 3. Extra Panels add items after HubSpot items. Header Item Link is required. Drag Extra Panels to reorder extras only. 4. Legacy Extra Item Link on Mega Panels is hidden. Do not use it for new extras. ================================================================================ 4. FIVE MENU TYPES (SAMPLE VIEW) ================================================================================ Chosen option → what the visitor sees on desktop. Compact Dropdown does not use Mega Panel / Column / Featured Style. The other four types do. On the phone, every type still uses the same hamburger list (see §8). Each type has its own marketer board (do not use the developer Design artboards or a 5-up strip on phones). | Menu Type | Chosen | Visible result | Sample | |-----------|--------|----------------|--------| | Dropdown | Compact flyout | Header Simple dropdown. No Featured photo. | https://smithworks.marketing/hubfs/module-documentation/sw-header-mega-mt-dropdown.png | | Dropdown + content | Live HubSpot children + Featured | List on one side, Featured photo/copy on the other. Featured does not change when you hover the list. | https://smithworks.marketing/hubfs/module-documentation/sw-header-mega-mt-dropdown-content.png | | HubSpot columns | L2 as column headings | Up to five columns from HubSpot children; Featured beside them. | https://smithworks.marketing/hubfs/module-documentation/sw-header-mega-mt-hubspot-columns.png | | Custom columns | You write the columns | HubSpot children ignored on desktop; your columns + Featured. | https://smithworks.marketing/hubfs/module-documentation/sw-header-mega-mt-custom-columns.png | | Custom menu | You write the left rail | Hover/focus swaps the right pane. Image Display is one set for every rail pane; each row has its own Media. | https://smithworks.marketing/hubfs/module-documentation/sw-header-mega-mt-custom-menu.png | Dropdown — compact Header Simple flyout under the L1. No Featured photo, no columns, no rail. https://smithworks.marketing/hubfs/module-documentation/sw-header-mega-mt-dropdown.png Dropdown + content — live HubSpot children in a list; Featured photo and copy stay put on the other side. https://smithworks.marketing/hubfs/module-documentation/sw-header-mega-mt-dropdown-content.png HubSpot columns — second-level HubSpot names become column headings (cap 5) with children under each; Featured beside the columns. https://smithworks.marketing/hubfs/module-documentation/sw-header-mega-mt-hubspot-columns.png Custom columns — you write each column. HubSpot children are ignored on desktop. Featured still available. See §4A for the stack and the three layouts. https://smithworks.marketing/hubfs/module-documentation/sw-header-mega-mt-custom-columns.png Custom menu — you write the left rail. Hover/focus swaps the right pane. Click follows that row’s link. https://smithworks.marketing/hubfs/module-documentation/sw-header-mega-mt-custom-menu.png Mix pointer (Style): fine pointer click-through vs coarse first-tap opens the panel. ================================================================================ 4A. CUSTOM COLUMNS — HOW TO CONFIGURE ================================================================================ Same column shape on Mega Panels and Extra Panels. Up to five columns. Section intro sits under the section title, above the columns. Leave a block empty to skip it. Examples below use generic labels (Plan, Build, Logo). They are not a specific site’s menu. Inside one column, top to bottom: https://smithworks.marketing/hubfs/module-documentation/sw-header-mega-column-stack.png 1. Image — optional icon or logo above the heading. 2. Headings — repeater. Each row is its own heading (text, display size, align, color). An empty Headings repeater prints nothing. There is no fallback to an older single Column Heading field. 3. Text — rich text under the headings. Links use the theme link color. 4. Space above buttons — pixels between the text and the buttons. 0 is none. 5. Buttons — repeater. Styles include filled, outline, gradient, and Simple Link. Simple Link can set its own link and hover color. The icon stays on the same line as the label. Each button has CSS Class. 6. Items list — shows only when the Buttons repeater is empty. It is a link list, not buttons. Adding a button row replaces the list. HubSpot child pages are not shown on desktop for this Menu Type. The phone drawer still lists the HubSpot menu. Three layouts (change Featured Position and Column Chrome; Menu Type stays Custom columns): https://smithworks.marketing/hubfs/module-documentation/sw-header-mega-column-layouts.png A. Card row — short intro under the title. Three or more columns with Column Chrome Card (icon, heading, text, Simple Link). Featured off, or Featured on the right. B. Featured on the left — Featured holds the logo, the heading, the text, and the button. Columns sit on the right as cards. Featured Position Left. C. Logo only, plain column — Featured is the image only (Image Fit Contain, scale under 100, alignment to place it). Copy and the button live in one column with Column Chrome Plain. Do not put the offer copy on Featured when Featured is the logo only. Where Featured sits (module setting cascades; one panel can override): https://smithworks.marketing/hubfs/module-documentation/sw-header-mega-featured-position.png - Right — default. Columns, then Featured. - Left — Featured, then the columns. - Below — columns on top, Featured under them. - Panel override: Inherit follows the module. Left, Right, or Below replace it on that panel only. Column Chrome: https://smithworks.marketing/hubfs/module-documentation/sw-header-mega-column-chrome.png - Card — default. Fill, border, radius, padding, and shadow on that column. - Plain — clears those on that column only. Other columns stay Card. Use Plain when the column is the page copy beside a logo. Image on Featured (Image Display, with Image Fit): - Image Fit Cover (default) fills the frame and crops. Contain shows the whole image. - Image Scale 10–100, default 100. Under 100, the image is that percent of the pane width. - Align horizontal: Left, Center, Right. Align vertical: Top, Center, Bottom. Vertical alignment applies only when Featured has no copy of its own. - Image left and Image right use that scale as the background size. - Empty Desktop Image or Tablet Image keeps the XL photo. Empty does not hide it. Panel open edge (Styles): Menu row (default) opens the panel under the menu row. Header bottom places the panel’s top on the bottom of the header. Header row with no buttons: the empty button slot is removed so the last menu item meets the inner edge. The slot returns when a header button exists or the hamburger is showing. Module inner padding still insets the row the same as the top bar. ================================================================================ 5. FEATURED IMAGE LAYOUT VS IMAGE DISPLAY ================================================================================ https://smithworks.marketing/hubfs/module-documentation/sw-header-mega-where-photo-sits.png | Group | Job | Not this group | |-------|-----|----------------| | Featured Image Layout | Where the photo sits: Stacked / Image left / Image right | Crop, height, replacement file | | Image Display | How tall, crop (Natural vs Fixed height + Anchor), copy sit, optional Desktop/Tablet file | Left vs stacked | | Featured (or Custom Menu Media) | The file and the copy | Hidden on the phone | Cascade: XL → Override Desktop → Override Tablet. Viewport names: XL / Desktop / Tablet. Empty Desktop Image or Tablet Image: leave empty to keep the XL photo, resized for that pane. Empty does not hide the image. Unlike SW Pillar Section, empty override images here do not hide. Image Display on Custom Menu is panel-wide (every rail pane). Each rail row still has its own Media file. ================================================================================ 6. APPLY VS OVERRIDE STYLE ================================================================================ https://smithworks.marketing/hubfs/module-documentation/sw-header-mega-extra-featured-style.png - Apply Featured Style / Apply Column Style (Styles tab): paints every mega card that does not override. - Override Featured Style / Override Left Pane Style (on that Mega or Extra card): this card only. - Override Panel Colors includes Panel Text Color (headings / unlinked labels), Link Color, Link Hover Color. - Apply Featured Style off = photo and copy sit on the tan Mega Panel. On = nested cream Featured card inside the panel. ================================================================================ 7. EXTRA PANELS AND LEFT PANE ================================================================================ Same board as §6 (left two cards): https://smithworks.marketing/hubfs/module-documentation/sw-header-mega-extra-featured-style.png - Header Item Link is required. Show Left Pane off = Featured full width. Show Left Pane on = left card + Featured; the pair stretches to equal height. - Extra Panels are omitted from the phone drawer. - Left Pane has its own image, headings, content, buttons, Left Pane Image Layout, and optional Override Left Pane Style. ================================================================================ 8. ON THE PHONE ================================================================================ Every Menu Type uses the same hamburger drawer. Featured photos and Extra Panels stay off. Override Mobile Menu only changes which HubSpot menu fills the list. Board (marketer): https://smithworks.marketing/hubfs/module-documentation/sw-header-mega-on-the-phone.png 1. Closed bar — Logo, one button, hamburger. One row. 2. Simple links — Tap the label to go to the page. 3. Parent closed — Label goes to the page. Plus opens children. 4. Parent open — Nested pages. Minus closes the list. Parents with children always use a link-row (label + plus/minus) so the toggle shares one column whether the L1 is a link or not. ================================================================================ 9. CONTENT TAB (order, Mega-specific) ================================================================================ Shared with Header Simple: Custom ID / Classes, Logo, Navigation (Menu Selection), Buttons, Announcement Bar, Top Bar, Mobile Menu Icon, Module Background Video. Top Bar (same as Header Simple 2026.10.21.17.33): below 768px both columns are full width. Alignment (Mobile) shows when Show on Mobile is on and defaults to center. The alignment above it covers large screens and tablet. Top bar margin stays on the bar. Padding stays on the row while columns sit side by side, and moves onto each column when both are full width and stacked. Mega-only: 1. Mega Panels — one card per HubSpot L1 you want to style. Recipe: Menu Type → Label (and Match URL only if names differ) → Featured Image Layout → Image Display → Featured content → Override Featured Style. 2. Extra Panels — extras after HubSpot items. Recipe plus Header Item Link and Show Left Pane. Not in the drawer. 3. Override Mobile Menu — optional HubSpot menu for the drawer only. ================================================================================ 10. STYLE TAB (Mega-specific) ================================================================================ Shared: Module Settings (Outer padding default 0 on `
`; Inner padding default 25px on the content row; drawer uses Inner padding), Outer/Inner backgrounds, Header Behavior, Menu Colors / Fonts, Logo Column Width, Menu Layout (Menu Position stays XL and cascades), Announcement / Top Bar Style. Mega-only: - Mega Panel Style, Apply Column Style, Apply Featured Style - Mix pointer - Featured images are not loaded on the phone (sources from 768px up) ================================================================================ 11. IMAGE DISPLAY ALIASES (agents) ================================================================================ XL Image Display wraps Height Mode / Height (px) / Anchor / Copy Alignment. Children keep `height_mode` etc. Aliases from the previous `*.image_display.*` paths so saved testers keep values. HubL reads `xl_image_display` with fallback to the old keys. Same wrap on Mega Featured, Extra Featured, Extra Left pane. Optional Desktop Image / Tablet Image sit beside that wrap. Empty = keep XL. ================================================================================ 12. COMMON TASKS ================================================================================ - Attach a panel to a HubSpot item: Mega Panels → Label = exact HubSpot L1 name. - Add a header item not in HubSpot: Extra Panels + Header Item Link. Do not use Extra Item Link (legacy). - Crop a Featured photo: Image Display → Fixed height + Height (px) + Anchor. Layout (left/right/stacked) is Featured Image Layout. - Same XL photo at Desktop/Tablet: leave Desktop Image and Tablet Image empty. - Equal-height Extra pair: Show Left Pane on. - Phone list from a different HubSpot menu: Override Mobile Menu. - Live site header: keep Simple on the global partial until the user names the theme swap. - Card row of offers: Menu Type Custom columns. Intro under the title. Column Chrome Card. Featured off or Right. - Logo and copy on the left, cards on the right: Featured Position Left. Put the logo, heading, text, and button on Featured. Columns stay Card. - Logo only, copy beside it: Featured is the image only. Image Fit Contain. Scale under 100. One column, Column Chrome Plain, holds the heading, text, and button. - Featured under the columns: Featured Position Below. ================================================================================ 13. LIMITS ================================================================================ - Do not edit sw-site_header.html on a Mega-only job. - Featured / Extra Panels do not paint on the phone. - Custom Menu Image Display is one crop/height for every rail pane. - HubSpot columns cap at five L2 headings. - This is not Outer Animated. ================================================================================ 14. DOCUMENT VERSION ================================================================================ Module: SW Header Mega. Master version number: 2026.10.15.14.41. Docs 2026.10.15.14.41: custom column stack, three layouts, Featured position, Column Chrome. Generic examples. Menu Type boards from 2026.09.15 stay. Documentation → /faqs.