Multi-column drop down menu in Debut theme

[aamirch]

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

[Anderson10]

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

[Anderson10]

https://frontiers-man-edinb.myshopify.com/

[gvales271]

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]

HI @gvales271 

Add this css:

#SiteNav .site-nav--has-dropdown:nth-child(2) ul{element.style {column-count: 3;}

[gvales271]

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)

[Jasoliya]

Remove old and add this:

#SiteNav .site-nav--has-dropdown:nth-child(2) ul{column-count: 3;}

[gvales271]

Thank you Yasoliva, it worked perfectly!!!

[Cooperton5000]

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

[Jasoliya]

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. 

[ajaku3714]

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]

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;}

[ajaku3714]

Great, thanks a lot!

[Baries007]

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]

Send currect store url.

[tber]

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]

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

[Anderson10]

Menu back as before. Code now removed.

[Jasoliya]

text me on email we cant use community as big chat