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.
Ah, thats for the wrong store. This is for Frontiers Man. I have readded you.
Could you please help me out?
Is not working for me 😞
I would like three columns for those dropdown menus that have more than five options.
https://elnumerouno.myshopify.com/
ps: reesho
@Jasoliya wrote: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 @gvales271
Add this css:
#SiteNav .site-nav--has-dropdown:nth-child(2) ul{element.style {column-count: 3;}
Thank you Yasoliva for your time. You are very kind..
Sadlly is not working..
When I add that line to the very button of the Assets/theme.scss.liquid my site gets all mest up. (imagees attached)
Remove old and add this:
#SiteNav .site-nav--has-dropdown:nth-child(2) ul{column-count: 3;}
Thank you Yasoliva, it worked perfectly!!!
Is it possible to do this for Supply theme -- the menu goes down too far. Store is www.sheffieldmakershuntersbar.com password awbayp
Tr this code:
.site-nav--dropdown { column-count: 2; }
By this code they convert to 2 column but not work proper as you have sub collection also so cant adjust by this css, for that need to change other css too.
Hi Jasoliya - how could I make 2 or 3 columns under my 'By Brand' headings for the poker set and poker chip menu items? My theme is debut, and my webite url is https://gutshotpokersupply.com/.
Thanks in advance for any assistance!
Hi @ajaku3714
Add this code in asset->theme.scss file at bottom:
#SiteNav .site-nav--has-dropdown:nth-child(3) .site-nav__childlist-item:nth-child(2) ul,
#SiteNav .site-nav--has-dropdown:nth-child(4) .site-nav__childlist-item:nth-child(2) ul{ column-count: 2;}
Great, thanks a lot!
Hi I'm trying to create a multi-column drop-down menu for one of my main nav categories as well "Shop our products" - I want 6 columns next to each other instead of columns stacked underneath each other
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
Menu back as before. Code now removed.
User | RANK |
---|---|
143 | |
109 | |
79 | |
62 | |
59 |
Explore the 30-30-30 rule, a dynamic social media strategy for new businesses. Learn how t...
By Trevor Sep 20, 2023Discover how to leverage the often overlooked footer of your ecommerce site to gain custom...
By Skye Sep 15, 2023In this blog, we’ll be shining a light on Shopify Partners, Experts, and Affiliates. Who a...
By Imogen Sep 13, 2023