Hello! I would like my store’s “brand” section to feature a drop down menu with multiple columns. Right now there is too much scrolling. I am looking for some code that will enable the mega menu to be spread out into multiple columns, say three or four, rather than just featuring the items in a giant list. I do not want to add sub-sections, but rather have all the “brands” listed in columns. I already tried some code options listed here on other shopify threads, but they don’t seem to work. Looking for code specific to the Trade theme. Thanks so much.
Topic summary
A user needed help converting their Trade theme’s brand navigation menu from a single scrolling column into a multi-column mega-menu layout without adding sub-sections.
Solution provided:
- Navigate to Online Store → Theme → Edit code
- Open the
base.cssfile - Add CSS code at the bottom:
.mega-menu .mega-menu__list--condensed { column-count: 3 !important; }
Outcome:
The CSS modification successfully created a 3-column layout for the mega-menu, eliminating excessive scrolling. The user confirmed the solution worked perfectly. This approach allows all brand items to display in organized columns rather than a lengthy single list.
1 Like
1 Like
Follow these steps:
-
Go to Online Store → Theme → Edit code
-
Open your base.css file and paste the following code at the bottom:
.mega-menu .mega-menu__list--condensed {
column-count: 3 !important;
}
Problem solved don’t forget to Like it and Mark it as Solution!
If you need help with customization/code part you can contact me for services
You can find the email in the signature below.
Regards
Guleria
1 Like
Thank you so very much! This worked perfectly!
1 Like