Thank you, but the results are not as I hoped. Made the columns skinny but didn’t break the long column into two separate shorter ones..
Specifically focusing on the HIRE and SHOP columns.
Topic summary
Issue: In the Shopify Impulse theme, dropdown menu columns (notably HIRE and SHOP) were too long. The goal was to split long lists into two side-by-side columns.
Progress:
- Initial CSS (column-count: 2 on .site-nav__dropdown at ≥768px) worked for single-level dropdowns but not for multi-level structures, resulting in narrow single columns.
- An interim suggestion added scrolling via max-height and overflow, which reduced height but did not create two columns.
Resolution:
- A flexbox-based CSS solution at ≥768px targeted .site-nav__dropdown’s multi-level layout: set .medium-up–one-fifth to display:flex with flex-wrap, adjusted grid alignment, made section headers full-width, and set inner divs to 50% width. This effectively split subcategory lists into two columns.
Outcome: The requester confirmed the final CSS achieved the desired two-column layout. No JavaScript changes were needed. Discussion concluded as resolved.
Notes: Code snippets are central to understanding the solution.