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

Hi, Follow this: Go to Online Store->Theme->Edit code 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-…

Hi the theme is motion https://thehemp-hacienda.co.uk/

Hi @ML2391 Go to Online Store->Theme->Edit code 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;}

Hi @thehemphacienda Go to Online Store->Theme->Edit code 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.

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?

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

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

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

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); …

Multi-column drop down menu in Debut theme

Store Design

thehemphacienda October 16, 2021, 10:59am 150

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 ?

Topic		Replies	Views
Multi-Column Drop Down Menu In curswine theme Store Design	2	56	March 15, 2022
Change the formation of dropdown menu Store Design menu , header , collection-page , landing-page , css	2	44	March 12, 2025
Debut Theme - How to create multi-column drop down from main nav menu Store Design	6	64	February 9, 2022
Taste theme - Need to make dropdown menu two columns Store Design menu	8	86	March 24, 2024
Multi-Column Drop Down Menu In Studio Theme Store Design	5	74	July 22, 2022

Multi-column drop down menu in Debut theme

Related topics