Code needed to create multi columns in nav menu.

[MattBailey]

Hello, I need to make my website's clickable 'brand' section into three columns. Currently, there are too many items, and the menu is complex to navigate on some browsers. I am happy to add code. Below is a screenshot of the menu I am referring to. Thank you.

[rifat_ShopiDevs]

Hi, @MattBailey 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

<style>
details[open]>.header__menu-item+ul {
    overflow: auto;
    max-height: 350px;
}​
</style>

result:

Hope this can help you,

[Moeed · Accepted solution]

Hey @MattBailey 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file

4) Add the following code in the bottom of the file above </body> tag

<style>
@media screen and (min-width: 768px) {
ul#HeaderMenu-MenuList-1 {
    column-count: 4 !important;
    column-gap: 20px !important;
    width: auto !important;
    padding: 20px !important;
    min-width: 800px !important;
}
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[MattBailey]

Thank you, that was exactly what I needed.

[Moeed]

Thank you for your reply. I'm glad to hear that the solution worked well for you. If you require any more help, please don't hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.

[Benjamen]

Hello 👋

The below solutions will indeed help with the overwhelming amount of items in your mega menu. I was on your site just thinking that some collection images in your mega menu might be able to let your customers quickly identify your products. Something like Pinnacle or Horizon from Meteor Mega Menu would work well. Just throwing that out there. 
Cheers 😊

[MattBailey]

Thanks, I hadn't thought of that. I'll be sure to have a look. Cheers