How can I create a multi-column mega menu in Dawn 12?

Store Design
,

Topic summary

A user is attempting to create a multi-column mega menu in Shopify’s Dawn theme version 12 but encountering layout issues.

Problem:

  • Existing solutions found in forums aren’t working
  • Added CSS code to base.css that creates columns, but items flow horizontally across rows first, then down
  • Desired behavior: items should flow vertically down columns first, then continue in the next column

Attempted Solution:

  • Modified .mega-menu__list width and display properties in base.css
  • Initial attempt appeared successful but ultimately didn’t work as intended

Support Response:

  • PageFly representative offered a solution involving adding code to theme.liquid file above the </head> tag
  • Specific code snippet appears corrupted/unreadable in the conversation

Status: Unresolved - the user is still seeking a working solution for proper column flow direction in their mega menu.

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

I’ve tried all the solutions I could find here but can not get the drop down menus to go to multi column. I have a LOT of items that will be in the menu.

Is this a Dawn 12 issue? My page is at https://SandrasStitchStash.com

2

I put this code in the base.css and that worked but it goes from across then down. I would like the list to go down then to the next column if possible.

@media only screen and (min-width: 750px){
.mega-menu__list{
width: 80rem !important;
}
.mega-menu__list li {
width: calc(100%/3);
display: inline-block;
}
}

3

Thought I had solved it but nope, didn’t work

4

Hi @SandrasStitchS1

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

Hope this can help you solve the issue

Best regards,

Richard | PageFly

2 Likes