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

[TeamSimpson]

Hello @Jasoliya,

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

Thank you,

[Jasoliya]

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 

[TeamSimpson]

That worked perfect, Thank You!!!

[MinhNguyen]

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]

Send me your store url 

[MinhNguyen]

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

[Jasoliya]

HI @MinhNguyen 

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

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

[MinhNguyen]

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.

[Jasoliya]

Add this css:

#MobileNav-Parent-1{column-count: 2;}

[MinhNguyen]

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

[Milky_Way_Shop]

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]

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!

[SixYardsPlus]

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]

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

[SixYardsPlus]

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]

Can you show me by screenshot i am not getting exact, will check if that possible then will share code. 

[fiberoptics03]

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 

[Jasoliya]

I cant access your store, you can send me your .myshopify store url ?

[fiberoptics03]

magiccloudsv.myshopify.com

password ezeezu

[Jasoliya]

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

Check your theme editor->header 

[AlexPo]

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]

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]

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

[bingetokyo]

that worked. thank you so much!

[mini-mall]

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]

Add this css 

.site-nav .site-nav--has-dropdown:nth-child(3) ul{column-count: 5; background: white;}

[mini-mall]

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]

Peux tu répondre à ma question ? Merci

---

@mini-mall wrote:

Thank you so much!

---

[DAMV]

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

---

---

---

[mini-mall]

Hi @DAMV maybe this can help you https://help.shopify.com/en/manual/sell-online/online-store/menus-and-links/drop-down-menus

[DAMV]

Non cela ne m'aide pas. J'ai lu et relu, j'ai regardé la vidéo mais aucune explication concrète.

---

@mini-mall wrote:

Hi @DAMV maybe this can help you https://help.shopify.com/en/manual/sell-online/online-store/menus-and-links/drop-down-menus

---

[DAMV]

Salut Minimal, Désolée mais je ne peux pas t'aider. Par contre tu as réussi à avoir des menus déroulants qui fonctionnent chez toi. Je n'y arrive même pas. Peux tu m'aider ? Un grand merci d'avance. DAMV shop

[BrendaSauvage]

Hi @Jasoliya 

I'm trying to make a multi column dropdown menu only for PRODUCTORES. I haven't been able to make any of the code posted here work.

www.salvajevinos.com

[Jasoliya]

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

#SiteNav > li:first-child ul{column-count: 2;}

Note: keep this menu at first position otherwise code will not work. 

[BrendaSauvage]

Thanks so much @Jasoliya . It worked perfect 🙂 Do you know how I can make it work for the mobile version?

Thanks a lot really!!