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

Replies 154 (154)
Jasoliya
Shopify Expert
4382 574 1103

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: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
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 

tber
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? PioPrints.com Thanks

pogjeniffer
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){

$.fn.extend(
{
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 ++;
}
else
{
currentItemNumber = 1;
currentColNum ++;
}
$('.list-column-'+classname+currentColNum).append(v);
});
$(this).parent().addClass('expended-div');
$(this).remove(); /*clean previous content */

}
});


$(this).list2Columns(3);

}
});

www.homeofapk.com/ 

tber
New Member
2 0 0

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