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

[Jasoliya]

I can see it proper working, where are you adding code?

i cant see you have added code

[thehemphacienda]

is it possible to make a multi column in motion theme?

[Jasoliya]

send me store url and menu name

Best regard 

[ML2391]

How to add multi-column to navigation menu in Boost 2.0 Shopify theme?

Store preview:

https://guldzjcsigl69efw-22203197.shopifypreview.com

[thehemphacienda]

Hi the theme is motion 

https://thehemp-hacienda.co.uk/

[Jasoliya]

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

[Jasoliya]

Hi @thehemphacienda 

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

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

Note: you have to make your menu text smaller its too big now.

[ML2391]

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?

[Jasoliya]

add in any css file

[thehemphacienda]

thanks it does work.ive tried making text smaller but the width is too wide it possible to open up a menu heading (knowldge centre) to a page of clickable tiles instead ?

[Jasoliya]

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

[thehemphacienda]

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]

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]

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]

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

[DianneOH]

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]

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

[DianneOH]

I solved the issue, thank you though! 

Sorry about that!!!

[c_jackson04]

Hello @Jasoliya

How would you add a multi-column dropdown for Shop on https://ri3qvpcf1y067i4l-51982074037.shopifypreview.com for the 'Albums' > 'Boy Groups' and 'Girl Groups' menu?

Thank you in advance for any possible help!!

[Jasoliya]

add this css:

.nav .dropdown-submenu:nth-child(2) .dropdown-menu,.nav .dropdown-submenu:nth-child(3) .dropdown-menu{column-count: 2;}