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

[SandrasStitchS1]

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

[SandrasStitchS1]

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;
}
}

[SandrasStitchS1]

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

[PageFly-Richard]

Hi @SandrasStitchS1 

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> 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 </head>

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

Hope this can help you solve the issue

Best regards,

Richard | PageFly