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

[itguyksmith]

Thank you for the prompt response.

I do not have a theme.css or theme.sccs in Assets.

[HayleySinton]

Hi @Jasoliya ,

Is the multi-column option available on the Galleria theme please? 

Many thanks

Hayley

[Jasoliya]

Send me store url and menu name will give you css.

[HayleySinton]

Aw thank you! 

tusktools-au password Zyber

Main menu - hopefully want to have 3 columns under Cutting , grinding , drilling 

Many thanks

Hayley 

[Jasoliya]

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

.navbar-nav.navbar-standard > li:nth-child(3) > ul,.navbar-nav.navbar-standard > li:nth-child(4) > ul,.navbar-nav.navbar-standard > li:nth-child(5) > ul{column-count: 3;}

[c_jackson04]

Hello @Jasoliya

How would you add a multi-column dropdown for Shop on https://ri3qvpcf1y067i4l-51982074037.shopifypreview.com for the 'Albums' > 'Boy Groups' and 'Girl Groups' menu?

Thank you in advance for any possible help!!

[Jasoliya]

add this css:

.nav .dropdown-submenu:nth-child(2) .dropdown-menu,.nav .dropdown-submenu:nth-child(3) .dropdown-menu{column-count: 2;}

[c_jackson04]

Thanks for quick response, I added it to the file theme.css but it hasn't changed. Did I add it in the wrong place?

[Jasoliya]

Follow this

1. open Layout -> theme.liquid file- > at end just before </body> paste this

<style>
.nav .dropdown-submenu:nth-child(2) .dropdown-menu,.nav .dropdown-submenu:nth-child(3) .dropdown-menu{column-count: 2;}
</style>

[lasertron]

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]

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

[lasertron]

omg that worked. thank you SO MUCH!!!

[VernonSullivan]

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]

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

[VernonSullivan]

Great ! It works perfectly ! Thanks a lot.

[Lola1234]

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

[Jasoliya]

@Lola1234  send me password 

[Lola1234]

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

[Lola1234]

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

[b0sw0rth]

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]

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]

Hi @Anderson10 

I can see you already did

Best regard 

[Anderson10]

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]

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...

[Jasoliya]

send me that preview url 

[Anderson10]

Thanks. See > https://frontiers-woman.com

[Jasoliya]

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

[Anderson10]

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

[Jasoliya]

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

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

[Anderson10]

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

[Jasoliya]

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

[Anderson10]

Invitation just sent. Thanks

[Jasoliya]

You did removed my access ?

[Anderson10]

No, you’re still one of my staff 

 

[Jasoliya]

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