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)

Accepted Solutions
Jasoliya
Shopify Expert
4461 574 1119

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 to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here

View solution in original post

Replies 171 (171)
Jasoliya
Shopify Expert
4461 574 1119

Send your store URL so we can check.

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
aamirch
New Member
11 0 0

laballey.com

Jasoliya
Shopify Expert
4461 574 1119

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 to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
giftsatbliss
Tourist
9 0 1

Hi sorry to jump on this post but i am trying to achieve the same for the drop down named 'Brands' on our website giftsatbliss.co.uk , i would be grateful if you could advise how to split the list into 3 or 4 columns, 

 

Thanks

Jasoliya
Shopify Expert
4461 574 1119

Hi @giftsatbliss 

Follow this:

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

 

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

Note: This css give base on just console so if you ad and menu then change nth-child(6) value.

 

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
giftsatbliss
Tourist
9 0 1

@Jasoliya wrote:

Hi @giftsatbliss 

Follow this:

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

 

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

Note: This css give base on just console so if you ad and menu then change nth-child(6) value.

 


Thank you so much for that Jasoliya it has been driving me mad for days 🙂

houseofjay
Tourist
12 0 0

Hi,

 

This is Joycy from House of Jay and We are using Grid Theme (Pixel Union), can you please advise on how we can edit the code to split it into columns as we keep adding more brands and he dropdown is already very long. Our website www.houseofjay.com. Thank you. 

Jasoliya
Shopify Expert
4461 574 1119

Want to set two column on all drop down or for just "Brands" menu? 

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
houseofjay
Tourist
12 0 0
Just the Brand.
houseofjay
Tourist
12 0 0

For just "Brands" Menu

Jasoliya
Shopify Expert
4461 574 1119

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

 

@media only screen and (min-width: 767px) {
      .navigation-menu .has-dropdown:nth-child(7) .navigation-submenu {
             column-count: 2;
        }
    }

Note: i have give solution just by console so if you add any menu before "Brands" then change 7 to its sequence number.

 

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
houseofjay
Tourist
12 0 0

Thank you so much. It's really a big help..

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
4461 574 1119

Send me your store url so i can check

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
HC-SD
New Member
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
4461 574 1119

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 to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
HC-SD
New Member
3 0 0

Thanks for your help, it works.

 

 

TeamSimpson
New Member
2 0 0

Hello @Jasoliya,

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

Thank you,

Jasoliya
Shopify Expert
4461 574 1119

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 to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here