Multi-column drop down menu in Debut theme

Solved
New Member
4 0 0

Hello,

I have been trying for hours to figure this out. Two of our drop down menus are too long and we need to split them into two columns. Is there any help or advice? my theme is Debut theme

0 Likes
Shopify Expert
2490 417 525

Send your store URL so we can check.

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
New Member
4 0 0

laballey.com

0 Likes

Success.

Shopify Expert
2490 417 525

Hi,

Follow this:

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

#SiteNavLabel-solvents { width: auto; }
#SiteNavLabel-solvents ul { column-count: 2; }
#SiteNavLabel-solvents ul li {-webkit-column-break-inside: avoid;page-break-inside: avoid;    break-inside: avoid; }

Note: I have given this css base on current theme.

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
1 Like
Tourist
4 0 0

Hi sorry to jump on this post but i am trying to achieve the same for the drop down named 'Brands' on our website giftsatbliss.co.uk , i would be grateful if you could advise how to split the list into 3 or 4 columns, 

 

Thanks

0 Likes
Shopify Expert
2490 417 525

Hi @giftsatbliss 

Follow this:

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

 

.site-nav > li:nth-child(6) .site-nav__dropdown{    column-count: 3;}

Note: This css give base on just console so if you ad and menu then change nth-child(6) value.

 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
1 Like
Tourist
4 0 0

@Jasoliya wrote:

Hi @giftsatbliss 

Follow this:

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

 

.site-nav > li:nth-child(6) .site-nav__dropdown{    column-count: 3;}

Note: This css give base on just console so if you ad and menu then change nth-child(6) value.

 


Thank you so much for that Jasoliya it has been driving me mad for days :)

0 Likes
Tourist
12 0 0

Hi,

 

This is Joycy from House of Jay and We are using Grid Theme (Pixel Union), can you please advise on how we can edit the code to split it into columns as we keep adding more brands and he dropdown is already very long. Our website www.houseofjay.com. Thank you. 

0 Likes
Shopify Expert
2490 417 525

Want to set two column on all drop down or for just "Brands" menu? 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Tourist
12 0 0
Just the Brand.
0 Likes