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 1200

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)
Jasoliya
Shopify Expert
4757 617 1200

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

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
DianneOH
Visitor
2 0 0

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
Shopify Expert
4757 617 1200

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

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
DianneOH
Visitor
2 0 0

I solved the issue, thank you though! 

 

Sorry about that!!!

thehemphacienda
Tourist
4 0 0

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 

Patrick415
Visitor
1 0 0

This also worked for me with Brooklyn theme!

Thank you

Jasoliya
Shopify Expert
4757 617 1200

add in any css file

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
Jasoliya
Shopify Expert
4757 617 1200

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

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
ML2391
Tourist
11 0 8

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
New Member
4 0 0

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
Shopify Expert
4757 617 1200

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

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
AppOut-Kevin
Shopify Partner
5 0 1

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
Excursionist
19 1 6

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
Shopify Expert
4757 617 1200

Hi @artisan-market 

Send your store 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
artisan-market
Excursionist
19 1 6
Hi. It’s rewblu
Jasoliya
Shopify Expert
4757 617 1200

I thing you have already done

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
sidavy
New Member
6 0 0

Hi @Jasoliya,

 

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

Jasoliya
Shopify Expert
4757 617 1200

Send me your store url so i can 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
HC-SD
Visitor
3 0 0

Hi Jasoliya,

 

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

Jasoliya
Shopify Expert
4757 617 1200

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"

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
HC-SD
Visitor
3 0 0

Thanks for your help, it works.

 

 

TeamSimpson
Visitor
2 0 0

Hello @Jasoliya,

How would you add a multi-column dropdown for Shop on Clearwaterlights.com?

Thank you,

Jasoliya
Shopify Expert
4757 617 1200

Hi @TeamSimpson 

As per your menu i have create code just for "Shop" menu.

Add this css in Asset->theme.scss file at bottom:

.nav-bar .has-dropdown:first-child .dropdown {    column-count: 2;min-width: 550px;}

Note: it will just affect on first menu 'Shop' so dont change it position 

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
TeamSimpson
Visitor
2 0 0

That worked perfect, Thank You!!!

MinhNguyen
Excursionist
17 0 2

Hi @Jasoliya
I am trying to add 2 column drop down in Minimal Theme with your code but it does not working.
Can you help me for this case.
I really appreciate that help.

 
Jasoliya
Shopify Expert
4757 617 1200

Send me your 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
MinhNguyen
Excursionist
17 0 2

My Store url: scotsprint.myshopify.com
Password to view is: 1234.
Please help me check my store. Thank you

Jasoliya
Shopify Expert
4757 617 1200

HI @MinhNguyen 

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

#MenuParent-1{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
MinhNguyen
Excursionist
17 0 2

OMG, thank you so much, It's work on Pc theme. But in the mobile theme it still the same.
May I ask your help again, if you have a free time.

mobile.JPG

Jasoliya
Shopify Expert
4757 617 1200

Add this css:

#MobileNav-Parent-1{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
MinhNguyen
Excursionist
17 0 2

That's perfect, Thank Jasoliya. Have a nice day!

Milky_Way_Shop
Excursionist
20 0 2

Hi Jasoliya, I've read all of your streams but still can do it. Can you suggest a solution so that the drop down manu of Cataloge and others showsin two/three columns? Here's my shop link:

https://www.milkywaytrading.co.uk/

 

  Will be extremely grateful

Milky_Way_Shop
Excursionist
20 0 2

You're a STAR! Heres how I did it:  Pasted it in  themes.scss.liquid but changed the value of the code as per my requirement.  #MenuParent-1 means first button from left. i changed it to #MenuParent-2{column-count: 2;} and another line #MenuParent-3{column-count: 2;}

#MenuParent-1{column-count: 2;}

 See the picture for reference.

 

Thanks guys!Multi Column Dropdown2.JPG.png

SixYardsPlus
Tourist
4 0 0

Hello Jasoliya,

How about only one sub-menu of a menu? If that is the only one that I need to be made on two columns?

It is for the 'Sarees' submenu under 'Products' for site sixyardsplus.com.

Jasoliya
Shopify Expert
4757 617 1200

Hi @SixYardsPlus 

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

@media only screen and (min-width: 767px) {
    #MenuParent-2 .site-nav__item:nth-child(3) .site-nav__dropdown-grandchild{width:auto;}
    #MenuParent-2 #MenuChildren-2-3{    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
SixYardsPlus
Tourist
4 0 0

Fantastic! Thank you so much! That worked, as expected!!

One thing I was looking up, was if there was a way to put a menu separator - a line between groups of related menu items. But I could not find a way to do that. Would appreciate if there are some ideas on this.

 

Jasoliya
Shopify Expert
4757 617 1200

Can you show me by screenshot i am not getting exact, will check if that possible then will share 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
fiberoptics03
Visitor
3 0 0

Hi @Jasoliya 

This is exactly how i am trying to get the layout.

i also am trying to center logo if possible.

My understanding is I need to have 2 navigation menus example menu 1 and 2 and then in the code to center the logo

The second is for the items not to go further than 14 rows if this make sense 

 

fiberoptics03_2-1605117943258.png

 

Jasoliya
Shopify Expert
4757 617 1200

I cant access your store, you can send me your .myshopify 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
fiberoptics03
Visitor
3 0 0

magiccloudsv.myshopify.com

 

password ezeezu

Jasoliya
Shopify Expert
4757 617 1200

You have already option with theme editor to move logo in center.

Check your theme editor->header 

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
AlexPo
Visitor
1 0 0

Hello,

I just can't find theme.scss file.

I have theme.css file and I added your code but my drop down menu is still in 1 column.

Could you please help me?

 

bingetokyo
Tourist
7 0 1

I am trying to split the peekers>shows section into 3-4 columns instead of 1 long one.

Using Impulse theme

www.bingetokyo.jp

 

Thanks for your help!

Jasoliya
Shopify Expert
4757 617 1200

Try to use this:

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

@media only screen and (min-width: 767px) {
         .header-item--split-left .site-navigation:first-child > .site-nav__item:first-child .grid__item{column-count: 4;    width: 40%;}
    }

 

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
bingetokyo
Tourist
7 0 1

that worked. thank you so much!

mini-mall
Visitor
3 0 0

Hi @Jasoliya 

Can you help me.

I am trying to add 5 column drop down menu that have more than five options in Minimal theme.

I tried your code but it is not working.

Website link: https://minimall.ph/

Thank you in advance. 

 

 

 

Jasoliya
Shopify Expert
4757 617 1200

Add this css 

.site-nav .site-nav--has-dropdown:nth-child(3) ul{column-count: 5; background: white;}
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
mini-mall
Visitor
3 0 0

Hi @Jasoliya It worked for me! Thank you so much!

 

@DAMV apologies I tried translating your post but It seems that google translate missed something crucial on your post. Will you please elaborate your concern. 

DAMV
New Member
6 0 0

Peux tu répondre à ma question ? Merci


@mini-mall wrote:

Thank you so much!


 

DAMV
New Member
6 0 0

Je n'arrive pas à faire des menus déroulants. Tu es arrivé à le faire. Peux-tu m'aider ? Merci.