New Shopify Certification now available: Liquid Storefronts for Theme Developers

Multi-column drop down menu in Debut theme

Solved
aamirch
New Member
11 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

Accepted Solution (1)
Jasoliya
Shopify Expert
4757 617 1201

This is an accepted solution.

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 custom changes? hire me.
3 months of Shopify are available for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles.
Want to get Free review and advice for sale on store ?? just text me here

View solution in original post

Replies 194 (194)
lasertron
Tourist
3 0 1

Can you help me too with the long dropdown problem? The category is "brands." My website is www.shopfivenine.com. I have tried many of the solutions in this thread to fix it myself but nothing worked.

Jasoliya
Shopify Expert
4757 617 1201

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

.Header__MainNav  ul > .HorizontalList__Item:nth-child(2)  .DropdownMenu{    max-width: 400px;}
 .Header__MainNav ul > .HorizontalList__Item:nth-child(2) .Linklist {    column-count: 2;}

 

Want custom changes? hire me.
3 months of Shopify are available for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles.
Want to get Free review and advice for sale on store ?? just text me here
lasertron
Tourist
3 0 1

omg that worked. thank you SO MUCH!!!

VernonSullivan
Visitor
2 0 0

Hello Jasoliya, 

 

I'm looking to add multi column in Crave theme but can't find the solution anywhere. Do you know how can I do ? That's my website www.aromesetfruits.fr  and my password : woflea

Jasoliya
Shopify Expert
4757 617 1201

@VernonSullivan 

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

.header__inline-menu ul.list-menu--inline > li:nth-child(3) #HeaderMenu-MenuList-3 { width: auto; column-count: 2; }

 

Want custom changes? hire me.
3 months of Shopify are available for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles.
Want to get Free review and advice for sale on store ?? just text me here
VernonSullivan
Visitor
2 0 0

Great ! It works perfectly ! Thanks a lot.

Lola1234
Visitor
3 0 0

Hey Jasoliya, I hope you have a nice day!

Could you help me with the division into two columns and with the addition of dividing line please? Here is my website https://satoryactivewear.myshopify.com

 

Lola1234_1-1647562955094.png

 

Jasoliya
Shopify Expert
4757 617 1201

@Lola1234  send me password 

Want custom changes? hire me.
3 months of Shopify are available for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles.
Want to get Free review and advice for sale on store ?? just text me here
Lola1234
Visitor
3 0 0

Hey Jasoliya, I hope you had a good weekend! Sure, my password: Vasilina1991

Lola1234
Visitor
3 0 0

Hey Jasoliya, think I gave you the wrong password? try this one please: tauglu

b0sw0rth
Tourist
9 0 1

Hi Jasoliya, I'm sorry if this isn't the right place to ask, but I have a similar issue to the many others who have commented. My site is Bannershallmark.com, I'm just looking to create columns for the brands and categories menus on the top bar. Do you know how I can do this? I'm using the expanse theme. 

Anderson10
Excursionist
24 0 7

Hi @Jasoliya,

 

I hope you don’t mind me asking but I’m having the same issue with the Prestige theme. Currently I have approx x50 items on my brand menu so I have to split by using A-G, H-M, etc. I would prefer to just have all items split over 4 columns rather than having to use sub-menus. My site is www.frontiers-man.com. I look forward to hearing from you. Many thanks. 

Jasoliya
Shopify Expert
4757 617 1201

Hi @Anderson10 

I can see you already did

Best regard 

Want custom changes? hire me.
3 months of Shopify are available for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles.
Want to get Free review and advice for sale on store ?? just text me here
Anderson10
Excursionist
24 0 7

Hi @Jasoliya , thanks for getting back to me. I’ve not managed to do it - the workaround I have now is creating the sub-menus with A-G,  H-M, etc. This allows me to have 4 columns. Ideally want to remove these but still have 4 columns. 

Thanks

Anderson10
Excursionist
24 0 7

Sorry, @Jasoliya I don't think I was being clear. Attached is how it is just now. On my other site (which you helped with previously in this thread) I now have the brand list over 3 columns.  See...Currently.jpg

Ideal Layout.jpg

Jasoliya
Shopify Expert
4757 617 1201

send me that preview url 

Want custom changes? hire me.
3 months of Shopify are available for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles.
Want to get Free review and advice for sale on store ?? just text me here
Anderson10
Excursionist
24 0 7
Jasoliya
Shopify Expert
4757 617 1201

we can only increase number of column with this code.

add this

.site-header .site-navigation > li:nth-child(4) ul{column-count: 4 !important;}
Want custom changes? hire me.
3 months of Shopify are available for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles.
Want to get Free review and advice for sale on store ?? just text me here
Anderson10
Excursionist
24 0 7

I just tried to add this to the bottom of the theme.css file but didn't work unfortunately 😞 

Jasoliya
Shopify Expert
4757 617 1201

 i cant see code in your theme.scss file, where you added?

or add me staff: jasoliyabrijesh123@gmail.com will check

Want custom changes? hire me.
3 months of Shopify are available for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles.
Want to get Free review and advice for sale on store ?? just text me here
Anderson10
Excursionist
24 0 7

I have just readded the code and removed the sub-menu headers. It's now one wide list of brands - see > Untitled.jpg

Jasoliya
Shopify Expert
4757 617 1201

keep all code as it is and add me staff need to check code

Want custom changes? hire me.
3 months of Shopify are available for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles.
Want to get Free review and advice for sale on store ?? just text me here
Anderson10
Excursionist
24 0 7

Invitation just sent. Thanks

Jasoliya
Shopify Expert
4757 617 1201

You did removed my access ?

Want custom changes? hire me.
3 months of Shopify are available for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles.
Want to get Free review and advice for sale on store ?? just text me here
Anderson10
Excursionist
24 0 7

No, you’re still one of my staff 

B5CE3CCF-B441-436C-B139-395500EFBD44.jpeg

Jasoliya
Shopify Expert
4757 617 1201

dont know i cant access store now  maybe remove and add me again 

Jasoliya_0-1671026383497.png

 

Want custom changes? hire me.
3 months of Shopify are available for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles.
Want to get Free review and advice for sale on store ?? just text me here
Anderson10
Excursionist
24 0 7

Ah, thats for the wrong store. This is for Frontiers Man. I have readded you. 

Anderson10
Excursionist
24 0 7
gvales271
New Member
5 0 0

Could you please help me out?

Is not working for me 😞

I would like three columns for those dropdown menus that have more than five  options.

https://elnumerouno.myshopify.com/

ps: reesho


@Jasoliya wrote:

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.


 

Jasoliya
Shopify Expert
4757 617 1201

HI @gvales271 

Add this css:

#SiteNav .site-nav--has-dropdown:nth-child(2) ul{element.style {column-count: 3;}
Want custom changes? hire me.
3 months of Shopify are available for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles.
Want to get Free review and advice for sale on store ?? just text me here
gvales271
New Member
5 0 0

Thank you Yasoliva for your time. You are very kind..

Sadlly is not working..

When I add that line to the very button of the Assets/theme.scss.liquid my site gets all mest up. (imagees attached)

 

ElNúmeroUNO.62.jpgElNúmeroUNO.61.jpg

Jasoliya
Shopify Expert
4757 617 1201

Remove old and add this:

#SiteNav .site-nav--has-dropdown:nth-child(2) ul{column-count: 3;}
Want custom changes? hire me.
3 months of Shopify are available for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles.
Want to get Free review and advice for sale on store ?? just text me here
gvales271
New Member
5 0 0

Thank you Yasoliva, it worked perfectly!!!

Cooperton5000
Visitor
2 0 0

Is it possible to do this for Supply theme -- the menu goes down too far. Store is www.sheffieldmakershuntersbar.com  password awbayp

Jasoliya
Shopify Expert
4757 617 1201

Hi @Cooperton5000 

Tr this code:

.site-nav--dropdown { column-count: 2; }

By this code they convert to 2 column but not work proper as you have sub collection also so cant adjust by this css, for that need to change other css too. 

Want custom changes? hire me.
3 months of Shopify are available for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles.
Want to get Free review and advice for sale on store ?? just text me here
ajaku3714
Visitor
2 0 0

Hi Jasoliya - how could I make 2 or 3 columns under my 'By Brand' headings for the poker set and poker chip menu items? My theme is debut, and my webite url is https://gutshotpokersupply.com/.

 

Thanks in advance for any assistance!

Jasoliya
Shopify Expert
4757 617 1201

Hi @ajaku3714 

Add this code in asset->theme.scss file at bottom:

#SiteNav .site-nav--has-dropdown:nth-child(3) .site-nav__childlist-item:nth-child(2) ul,
#SiteNav .site-nav--has-dropdown:nth-child(4) .site-nav__childlist-item:nth-child(2) ul{ column-count: 2;}
Want custom changes? hire me.
3 months of Shopify are available for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles.
Want to get Free review and advice for sale on store ?? just text me here
ajaku3714
Visitor
2 0 0

Great, thanks a lot!

Baries007
Visitor
1 0 0

Hi I'm trying to create a multi-column drop-down menu for one of my main nav categories as well "Shop our products" - I want 6 columns next to each other instead of columns stacked underneath each other 

www.babaybeads.co.za 

 

Jasoliya
Shopify Expert
4757 617 1201

Send currect store url.

Want custom changes? hire me.
3 months of Shopify are available for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles.
Want to get Free review and advice for sale on store ?? just text me here
ameryellein
Visitor
1 0 0

@Jasoliya I am having a similar issue in which I have created a drop-down menu for my site with 4 categories. I would like all four to be listed beside each other across the screen but the 4th category is listed beneath the others. Could you possibly help me with this adjustment?

tber
Visitor
2 0 0

I successfully added this 2 column code to my theme.scss.liquid file, however it does not work on mobile. I cannot scroll or see half of the menu items in my Products by Saint drop down on mobile. Do you have solution that would work there? PioPrints.com Thanks

Jasoliya
Shopify Expert
4757 617 1201

ok do menu it was before so i can add my code. remove your code

Want custom changes? hire me.
3 months of Shopify are available for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles.
Want to get Free review and advice for sale on store ?? just text me here
Anderson10
Excursionist
24 0 7

Menu back as before. Code now removed.

 

Jasoliya
Shopify Expert
4757 617 1201

text me on email we cant use community as big chat 

Want custom changes? hire me.
3 months of Shopify are available for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles.
Want to get Free review and advice for sale on store ?? just text me here