Hi,
I am having trouble to turn my mega menu into a multi-column single menu. Now it is a single column of a long list. Can someone please help?
Topic summary
A user successfully converted their Dawn 11.0 theme’s single-column mega menu into a multi-column layout through custom CSS.
Solution implemented:
- Added CSS code to
component-list-menu.css - Set mega menu width to 80rem on screens 750px and wider
- Configured list items to display in 3 columns using
calc(100%/3)andinline-block
Current status:
- The code appears to be working
- User is seeking validation on whether their CSS approach is correct
- Another participant offered to help but requested the store URL (not provided in the final response)
The discussion includes a screenshot showing the menu transformation and a Shopify preview link demonstrating the result.
1 Like
Sure but please give us the store URL then we will able to help you.
Thank you for your reply. I sort of did it myself by adding this code :
@media only screen and (min-width: 750px){
.mega-menu__list{
width: 80rem !important;
}
.mega-menu__list li {
width: calc(100%/3);
display: inline-block;
}
}
at the bottom of the component-list-menu.css
It worked and I would like your opinion if this is correct code ?