Hi there, my client has a fashion store which is slowly growing and we now have quite a few categories and collections. At the moment, under ‘Shop’ and ‘Brands’ everything is showing up in one column, is there anyway we can get things to show up in multiple columns?
Topic summary
Goal: Show “Shop” and “Brands” sub-menu items in multiple columns on a Shopify fashion store (elleryandmoss.com.au).
Progress and guidance:
- Initial suggestion was to add custom code below the tag in theme.liquid, with an image showing the expected multi-column result. The requester couldn’t locate the tag.
- Updated solution: add CSS to base.css instead. Instructions: Online Store → Themes → Edit code → open base.css → paste code at the end.
Key code (central to the solution):
- A desktop-only media query (min-width: 995px) sets the mega menu list to display: grid and ensures list items are full width within the grid. Targeted selector: ul.mega-menu__list.page-width.mega-menu__list–condensed and its li elements.
Notes:
- “Mega menu” refers to a large dropdown menu; the media query limits changes to desktop view.
Outcome:
- After receiving file navigation screenshots and the CSS snippet, the requester confirmed appreciation, indicating the issue was resolved.
Hi Sandeep,
Here’s the URL:
https://elleryandmoss.com.au/
Ideally wanting the brands and shop submenu categories to go into multiple columns.
Thank you,
Sophie
Hi @bescene ,
Follow these Steps:
- Go to Online Store
- Edit Code
- Find theme.liquid file
- Add the following code just below tag
Result:
If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!
Best Regards,
LuffyOnePiece
Hi there,
I’m struggling to find the tag . I’ve tried to search for it, but it’s not appearing.
Any suggestions? Thank you.
Hi @bescene ,
Add the below code at the end of the base.css file.
@media only screen and (min-width: 995px) {
ul.mega-menu__list.page-width.mega-menu__list--condensed {
display: grid !important;
}
ul.mega-menu__list.page-width.mega-menu__list--condensed li {
width: 100% !important;
}
}
If you require further help to customize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!
Best Regards,
LuffyOnePiece
Sorry, I’m still struggling to find it. I’m not very competent with code.
Hi @bescene ,
Go to the Online store → Themes-> Edit code
Search for the base.css file and add the code in the end of the file as in reference.
Thank you
1 Like
Thank you so much for all your help. Really appreciate it 
1 Like