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

[hannahlizs]

Hi Jasoliya,

I have searched through this whole thread and have not been able to get a multi-column to work on my Brands menu. URL is https://weather-boutique.myshopify.com and password is hannah7

If you are willing to help it is greatly appreciated!

[Jasoliya]

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

#SiteNav > li:nth-child(2) .side-bar-menu{width:100%;}
#SiteNav > li:nth-child(2) .side-bar-menu ul{column-count: 4;}

[ML2391]

Any chance you know the code to add this to a Shopify 2.0 Blockshop theme?

[ocnuk]

Hi,

i've been trying to add multi collum drop downs to my page, i have been reading and trying the replys however i'm not having any luck.

Could you help? My website is www.oncloudnineuk.co.uk

many thanks

[Jasoliya]

For which menu do you want 2 column? 

[ocnuk]

Hi,

In Home Decor & Furniture please

thanks

[Jasoliya]

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

#SiteNav > li:nth-child(3) .site-nav__dropdown,#SiteNav > li:nth-child(6) .site-nav__dropdown{ column-count: 2;}

[ocnuk]

Hi,

I've just done what you've said and unfortunately it hasnt worked?

Any other suggestions? thanks in advance !

[Jasoliya]

I can see it proper working, where are you adding code?

i cant see you have added code

[thehemphacienda]

is it possible to make a multi column in motion theme?

[Jasoliya]

send me store url and menu name

Best regard 

[ML2391]

How to add multi-column to navigation menu in Boost 2.0 Shopify theme?

Store preview:

https://guldzjcsigl69efw-22203197.shopifypreview.com

[thehemphacienda]

Hi the theme is motion 

https://thehemp-hacienda.co.uk/

[Jasoliya]

Hi @thehemphacienda 

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

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

Note: you have to make your menu text smaller its too big now.

[thehemphacienda]

thanks it does work.ive tried making text smaller but the width is too wide it possible to open up a menu heading (knowldge centre) to a page of clickable tiles instead ?

[Jasoliya]

for that need code changes, but you can do smart and fast way by adding this

.site-nav__dropdown-link{ overflow: hidden;text-overflow: ellipsis;}
.site-nav__dropdown>li{max-width: 365px;}

[DianneOH]

Hopefully this thread is still alive:

How would you go about creating multiple columns within the brands dropdown for optical-heights.com?

Thank you for your time!

@Jasoliya (I'm sorry if this is rude)

[Jasoliya]

you have already column in menu .. in which menu want column? 

[DianneOH]

I solved the issue, thank you though! 

Sorry about that!!!

[thehemphacienda]

hi thanks ,it did work.

but now ive moved nav bar layout and the wrong column is double drop down.

for example CBD campaign should be 1 single column and Knowledge centre should be 2 or 3 rows if possible . 

https://thehemp-hacienda.co.uk/

best regards 

hamish 

[Jasoliya]

add in any css file

[Jasoliya]

Hi @ML2391 

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

Note: Its for "SHOP BY CATEGORY" menu only

.site-nav > li:nth-child(4) ul{ column-count: 2;}

[ML2391]

Instead of having theme.css, I have a theme.js (entered the code and it didn't work).

Would this have to be converted to JSON?

[Mohammedf]

Hello @Jasoliya 

my store URL www.m-fitaihi.com

I have been trying for days now to create a multi column drop down menu for my theme. under designers, i will have some collection for each designer. could you please advice on the code? I've never use this community before and I'm not sure if that's the right way to go about it. 

sorry if I'm jumping in any conversation 

thanks a lot for your help 🙂 

[Jasoliya]

So in which menu you want to make two column menu? i think you have all short menu no need. 

[AppOut-Kevin]

Hello @Jasoliya,

I found one of your replies a while ago and was able to integrate it into my site.  As we have grown though our brand menu continues to expand, and if I add a new column now it goes off of the screen.  Is there a way to move the menu to a more central location like some of my other larger menu dropdowns?  For example, the menu for "Our Store" drops down in the center of the screen, despite being the last menu item.  Ideally, the "Brands" menu would do the same.  My site is www.appalachianoutfitters.com.  I appreciate any help you can provide.

Thanks,

Kevin

[artisan-market]

Hi @Jasoliya 

How would I add a drop down menu with 4 columns on a debut theme on page 'makers' 

shop https://artisan-market-online.myshopify.com/

[Jasoliya]

Hi @artisan-market 

Send your store password. 

[artisan-market]

Hi. It’s rewblu

[Jasoliya]

I thing you have already done

[sidavy]

Hi @Jasoliya,

the code is not working for me. I want to split 3 columns in dropdown menu All Categories.

[Jasoliya]

Send me your store url so i can check

[HC-SD]

Hi Jasoliya,

How would I go about getting the multi column dropdown for travelkarma.com? Created in Debut theme.

[Jasoliya]

HI @HC-SD 

You can add css like:

 @media only screen and (min-width: 767px) {
       .site-nav__childlist{ column-count: 2;}
    }

Note: you have to remove empty menu from blog "LIFE"

[HC-SD]

Thanks for your help, it works.