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

Hi @giftsatbliss Follow this: Go to Online Store->Theme->Edit code 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 :slight_smile:

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.

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…

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. [Screenshot.png]

Multi-column drop down menu in Debut theme

Store Design

Jasoliya October 10, 2019, 9:08am 9

Want to set two column on all drop down or for just “Brands” menu?

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

Multi-column drop down menu in Debut theme

Related topics