Multi-column drop down menu in Debut theme

New Member
11 0 0


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

Replies 154 (154)
Shopify Expert
4396 574 1110

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

best regards 



New Member
2 0 0

I successfully added this 2 column code to my theme.scss.liquid file, however it does not work on mobile. I cannot scroll or see half of the menu items in my Products by Saint drop down on mobile. Do you have solution that would work there? Thanks

New Member
2 0 0

Please use below code to split your long column into small ones:

$("#SiteNav li ul").each(function(){
var len = jQuery(this).find('li').length;
if(len > 9){

list2Columns: function(numCols)
var listItems = $(this).find('li'); /* get the list data */
var listHeader = $(this);
var numListItems = listItems.length;
var numItemsPerCol = Math.ceil(numListItems / numCols); /* divide by the number of columns requires */
var currentColNum = 1, currentItemNumber = 1, returnHtml = '', i = 0;
var classname = $(this).parent().attr('id');

/* append the columns */
for (i=1;i<=numCols;i++)
$(this).parent().append('<ul class="column list-column-' +classname+ i + '"></ul>');

/* append the items to the columns */
$.each(listItems, function (i, v)
if (currentItemNumber <= numItemsPerCol){
currentItemNumber ++;
currentItemNumber = 1;
currentColNum ++;
$(this).remove(); /*clean previous content */




New Member
2 0 0

Thanks for the quick response, but that didn't work when added to theme.js.