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

SandrasStitchS1
Excursionist
14 2 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

 

Replies 3 (3)

SandrasStitchS1
Excursionist
14 2 1

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
Excursionist
14 2 1

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

PageFly-Richard
Shopify Partner
4338 989 1644

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.