[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.
1

Hi,

is there a way to create a full width dop down menu? With each category in a seperate row and the products of the category displayed below the category title?

I think what I am looking for is called a mega menu. I’d love to have a really simple and minimal menu that just displays a few categories + their content as links.

I am using the craft theme.

Thank you so much! :slightly_smiling_face:
Anastasia

edit: I just saw that there is a possibility to change it in the theme settings! To change the menu from “dropdown” to “mega menu” and customize it with CSS from there on.

2

hi @Asoufia

  1. Go to Online Store

  2. Search for base.css file

  3. Paste this code
    details[open]>.header__submenu{

width: 100rem;

}

1 Like
3

Hello @Asoufia

To provide you with the most precise solution in this case, could you please share your page URL ( with pass if your store password is enabled )?

Thank you and hope to hear from you.
Best regards,
GemPages Support Team

1 Like
4

Thank you for your help! It worked. Unfortunately it doesn’t show the menu under the menu and with a full 100% width: https://shop.asoufia.com/

Is there also a way to

  • make the submenu open on hover (rather than by clicking on it)?
  • display the submenu (product categories) in a grid next to each other?
  • display the content of each submenu?

I think what I am looking for is called a mega menu. I found an app for shopify to create it with but I would love to do it with CSS and very minimal if it’s possible.

Thank you so much for your help :slightly_smiling_face:

5

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