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

We can only do static solution form front side so ad this code to fixed “shop” menu column issue. Add in theme.scss file at bottom: .site-nav > li:nth-child(2) ul > li.site-nav__childlist-item:nth-child(2) ul{column-count: 2;}

Thanks for your help! Much appreciated

Hi Jasoliya , Is it also possible to split collections that are created as sub-menus, using page.list-collections template ,into columns?

Hello @Jasoliya Well…I guess it’s my turn… I’d have prefer to fix this by myself, but can’t get the result I expected. I also need 2 columns menu dropdown for my Vendor menu on https://www.archipel.berlin as the list is getting long. Sorry to bother, and thank you for reading.

Go to Online Store->Theme->Edit code Asset->theme.scss Or theme.css-> paste bellow code in bottom of file .menuContainer ul.nav > li:nth-child(2) .menuDropdown{ column-count: 2;}

Thank you so much for your quick answer ! It worked!

Hello again, I’m facing an other issue : I want to change my menu title color on a specific page. Here’s what I tried : {%- if section.settings.velamenu_enable -%} {%- endif -%} In the vela-header-menu.liquid snippets and : .velaMegamenu2{ .menuContainer { position: relative; …

Hi @Jasoliya , Is the multi-column option available on the Galleria theme please? Many thanks Hayley

Send me store url and menu name will give you css.

Multi-column drop down menu in Debut theme

Store Design

Jasoliya May 1, 2021, 5:22pm 117

Go to Online Store->Theme->Edit code
Asset->theme.scss Or theme.css-> paste bellow code in bottom of file

.menuContainer ul.nav > li:nth-child(2) .menuDropdown{ column-count: 2;}

Topic		Replies	Views
Multi-Column Drop Down Menu In curswine theme Store Design	2	51	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	57	February 9, 2022
Taste theme - Need to make dropdown menu two columns Store Design menu	8	84	March 24, 2024
Multi-Column Drop Down Menu In Studio Theme Store Design	5	70	July 22, 2022

Multi-column drop down menu in Debut theme

Related topics