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.
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..
Hi @Jasoliya,
the code is not working for me. I want to split 3 columns in dropdown menu All Categories.
Send me your store url so i can check
Hi Jasoliya,
How would I go about getting the multi column dropdown for travelkarma.com? Created in Debut theme.
HI @HC-SD
You can add css like:
@media only screen and (min-width: 767px) { .site-nav__childlist{ column-count: 2;} }
Note: you have to remove empty menu from blog "LIFE"
How would you add a multi-column dropdown for Shop on Clearwaterlights.com?
Thank you,
Hi @TeamSimpson
As per your menu i have create code just for "Shop" menu.
Add this css in Asset->theme.scss file at bottom:
.nav-bar .has-dropdown:first-child .dropdown { column-count: 2;min-width: 550px;}
Note: it will just affect on first menu 'Shop' so dont change it position
User | RANK |
---|---|
229 | |
148 | |
55 | |
52 | |
46 |
Thanks to all who participated in our AMA with 2H Media on planning your 2023 marketing bu...
By Jacqui Mar 30, 2023Thanks to all Community members that participated in our inaugural 2 week AMA on the new E...
By Jacqui Mar 10, 2023Upskill and stand out with the new Shopify Foundations Certification program
By SarahF_Shopify Mar 6, 2023