Vertical Multi-Column Dropdown Menu In Dawn Theme

Store Design
1

Hello,

I saw the code below from @LitExtension in another discussion. This worked well changing the dropdown from one long list to 3 columns but the dropdown now reads alphabetically from left to right but I would prefer if it read alphabetically from top to bottom of each column. Any help would be appreciated!

“Go to Assets > component-list-menu.css and paste this at the bottom of the file:”

@media only screen and (min-width: 750px){
.header__submenu.list-menu{
width: 60rem !important;
}
.header__submenu.list-menu li {
width: calc(100%/3);
display: inline-block;
}
}

2

Hi @HRNaoise ,

Sorry, this is not possible. You can rearrange the order of the menu in navigation.

After reordering, I think it will display fine.

3

@HRNaoise

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community! :blush:
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

4

Hello, I noticed that this thread has kind of been abandoned since you last posted, however I have also corrected my column number issue but would now like to have the items displayed vertically first before moving to the next column(s). There were solutions elsewhere, coding for mega menus, but I am using dropdown menus and have not been able to find a solution. I don’t particularly need them in alphabetical order, the order that I set up in Shopify’s navigation menu is actually preferred for me. Again though, they are displaying left to right first and then they work their way down depending on how many columns I have set up.

My website: https://www.teranisandbows.com/

Password (if it’s still on when you receive this): rtohru

5

Hello KetanKumar,

I have a shop with this same issue. the columns are not in alphabetical order from top to bottom, but rather left to right. do you have any insight into this issue? website: newearthseeds.com

thank you for any help.

Cory