Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
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.
Send your store URL so we can check.
laballey.com
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.
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
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.
@Jasoliya wrote: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 🙂
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.
Want to set two column on all drop down or for just "Brands" menu?
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.
Thank you so much. It's really a big help..
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);
}
});
Thanks for the quick response, but that didn't work when added to theme.js.
For just "Brands" Menu
Hi
I have similar issue. My site name is: oztechbuddy.com.au
could you plese have a look and help please?
Regards,
Roni
In which menu you want to make 2 column ? you have all short menu
1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file
#SiteNav .site-nav__item:nth-child(1) .site-nav__dropdown-container:nth-child(1) .meganav__list{column-count: 2;} #SiteNav .site-nav__item:nth-child(1) .site-nav__dropdown-container:nth-child(1) .site-nav__dropdown{width:auto;}
Hi Jasoliya
My first long menu converted into a multi-colmon dropdown menu. But other long menus still long.
Shouldn't that code going to convert all long menus of the whole site?
Apple > Case. This is working fine.
Apple > W&F Case. Its still a long menu
Any idea why its happening?
Kind regards,
Roni
If you add code for conman then it will convert all menu to 2 column even 3 link in menu. for that we have to add one by one css for all long menu
You saved me once again. Thanks for explaining. I converted all of my long menus into 2-colmun menus.
Hi there!
Was wondering if you would be able to help me make my drop down menus 2 columns in the Blockshop theme?
Send your store url
Add this css in asset->theme.sss file at bottom, and like if work
.x-menu--level-1--container li:nth-child(5) .x-menu--level-2--list,.x-menu--level-1--container li:nth-child(6) .x-menu--level-2--list{column-count: 2;}
Hello Jasoliya
can you please help. I need 2 column for dropdown menu. The website is https://www.kisnagems.co.uk and its for the last menu heading "more gemstone jewelry"
thanks
add this css in theme.scss file at bottom and like if work:
.site-navigation .navmenu-depth-2 .navmenu-link{padding: 0.4375rem 0rem 0.4375rem 0.5625rem;} .site-navigation li:last-child .navmenu-submenu{column-count: 2;}
thanks for this, it works
Hey Jasoliya,
The "Shop" submenu is too long and it'd like to make it 3 columns. Can you help me? The url is https://weld-usa-development.myshopify.com/
Thank you!
Send me the password of store.
I ended up changing the design to avoid the problem, but thank you.
I am having this issue as well with our menus. We have quite a long list of brands. Would you be so kind as to guide me on our site dev site?
pipedream-dev.myshopify.com
password for site is pipedreamdev
Our current theme is "Showcase"
then add in style.css file at bottom
Hi Jasoliya,
I have searched through this whole thread and have not been able to get a multi-column to work on my Brands menu. URL is https://weather-boutique.myshopify.com and password is hannah7
If you are willing to help it is greatly appreciated!
1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss Or theme.css-> paste bellow code in bottom of file
#SiteNav > li:nth-child(2) .side-bar-menu{width:100%;}
#SiteNav > li:nth-child(2) .side-bar-menu ul{column-count: 4;}
Any chance you know the code to add this to a Shopify 2.0 Blockshop theme?
Hi,
i've been trying to add multi collum drop downs to my page, i have been reading and trying the replys however i'm not having any luck.
Could you help? My website is www.oncloudnineuk.co.uk
many thanks
For which menu do you want 2 column?
Hi,
In Home Decor & Furniture please
thanks
1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss Or theme.css-> paste bellow code in bottom of file
#SiteNav > li:nth-child(3) .site-nav__dropdown,#SiteNav > li:nth-child(6) .site-nav__dropdown{ column-count: 2;}
Hi,
I've just done what you've said and unfortunately it hasnt worked?
Any other suggestions? thanks in advance !
I can see it proper working, where are you adding code?
i cant see you have added code
is it possible to make a multi column in motion theme?
send me store url and menu name
Best regard
How to add multi-column to navigation menu in Boost 2.0 Shopify theme?
Store preview:
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.
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 ?
Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024