[solved] Full-width drop down Menu (Craft theme)

Technical Q&A

Topic summary

A user seeks to implement a full-width mega menu in their Craft theme Shopify store, displaying categories in separate rows with products shown below each category title.

Initial Solution Provided:

  • Navigate to Online Store and locate the base.css file
  • Add CSS code: details[open] > .header__submenu { width: 100rem; }

Current Status:
The basic CSS implementation partially worked but doesn’t achieve the desired full-width (100%) display. The user has additional requirements:

  • Enable submenu opening on hover instead of click
  • Display submenu content (product categories) in a grid layout next to each other
  • Maintain a minimal, CSS-only approach

Store URL shared: https://shop.asoufia.com/

The discussion is marked as solved, though the user’s follow-up questions about hover functionality and grid layout suggest the solution may be incomplete or the user found an alternative approach.

Summarized with AI on November 21. AI used: claude-sonnet-4-5-20250929.
5

Hi :slightly_smiling_face: That would be great, thank you! This is the link to my shop: https://shop.asoufia.com/