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
4745 617 1195

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 192 (192)
Anderson10
Excursionist
21 0 7

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

Anderson10
Excursionist
21 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
4745 617 1195

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
4745 617 1195

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
4745 617 1195

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
4745 617 1195

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
4745 617 1195

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
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
4745 617 1195

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
21 0 7

Menu back as before. Code now removed.

 

Jasoliya
Shopify Expert
4745 617 1195

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