How can I edit my menu to have multiple horizontal rows?

Store Design
, ,

Topic summary

A user seeks help creating a horizontal dropdown menu with multiple rows (specifically three rows with three products each) instead of a single horizontal line of items.

Proposed Solution (Dawn Theme):

  • Switch the menu to “Mega Menu” via Theme Customizer → Header → Desktop menu type
  • Add custom CSS to base.css using flexbox properties (display: flex, flex-wrap: wrap) and set item width to control columns per row
  • The CSS snippet provided allows adjusting the number of columns by modifying the width percentage

Current Status:

  • The original poster shared a visual example image showing their desired layout
  • Another user attempted the solution but couldn’t locate the Mega Menu option in their customization settings, suggesting they may be using a different theme
  • The solution is specifically for Shopify’s Dawn theme and won’t work with other themes
  • Discussion remains open with the second user awaiting further assistance
Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

Hello,

I could need expert help with a challenge I have faced.

I want to to edit my menu to be horizontal with multiple rows.

Thank you for your time !

2

Hello @webbler
Can you share store URL?

3

Thank you for answering. The store is not active at the moment.

The drop down menu is horizontal in straight line, about 9 product. I want the drop down menu to be in three rows with three product on each. I hope I could explain.

4

horizontal menu example.jpg
horizontal menu example.jpg673×585 36.5 KB

5

Hi @webbler . If you are using dawn theme for your store. First of all you will have to switch the menu to mega menu.
Go to Online Store (you will see all the themes in your store there).
Click Customize (for the theme you want to add multiple row menu).
For the customizer Click “Header”
In the Header Section you will see option “Desktop menu type” choose “Mega Menu”.
Now you have to use some css to finally make it happen.
First go back to Online Store.
Click the three dots right next to the customizer.
From the dropdown click on edit code. it will open your theme file.
Now search base.css and paste the code below at the end of base.css file.

.mega-menu__list{
    display: flex!important;
    flex-wrap: wrap;
}
.mega-menu__list li {
    width: 25%; // you can adjust the width according to the number of colums you want
}

If you find it helpul please mark it as a solution. Thanks.

If you are using any other theme this will not work
Regards,
Sarib Khan (Shopify Developer)
LinkedIn Profile

6

Hi,

I tried this for my shop but could not find the Mega-menu step in my customization?

Do you think you could you help me?

Regards

Marcus