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

[webbler]

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 ! 

[niraj_patel]

Hello @webbler 
Can you share store URL?

[webbler]

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. 

[webbler]

[saribkhan]

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

[MarcusSmithson]

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