Add this css in asset->theme.sss file at bottom, and like if work
.x-menu--level-1--container li:nth-child(5) .x-menu--level-2--list,.x-menu--level-1--container li:nth-child(6) .x-menu--level-2--list{column-count: 2;}
Topic summary
Adding multi‑column layouts to Shopify navigation dropdowns (Debut and other themes) via CSS. Core approach: edit the theme stylesheet (theme.scss/theme.css) and set column-count on the target menu’s dropdown list, often with width tweaks.
Key techniques:
- Use CSS selectors to target specific menus/items (e.g., .site-nav > li:nth-child(n) ul, #SiteNavLabel-…, #MenuParent-1/2 in Minimal). Apply column-count: 2–6 and sometimes width:auto or min-width to prevent wrapping issues.
- Keep menu position consistent when using :first-child or :nth-child selectors; otherwise the rule won’t apply.
- Prefer desktop-only rules; for mobile, avoid columns and add scrolling (e.g., .mobile-nav__dropdown{max-height:500px;overflow-y:scroll}).
- Static, per‑menu solutions are recommended; a “common” rule may affect all menus unintentionally. Some selectors were corrected mid-thread to fix non-working code.
Recent updates/outcomes:
- Multiple site-specific snippets provided for Debut, Minimal, Grid, Motion, and others; several users confirmed working results or adjusted designs to avoid the issue.
- Latest post shows a user re-applied code and removed sub‑menu headers; result is a single wide brands list, suggesting ongoing tweaks.
Notes:
- CSS column-count splits list items into multiple columns; :nth-child targets a specific menu item.
- Screenshots provided illustrate desired multi-column layout and current single wide list.
Status: No universal fix; case-by-case CSS. Discussion remains open for individual setups.
1 Like