A user is experiencing layout issues with the mega menu on Shopify’s Dawn theme, where menu items extend infinitely downward instead of wrapping properly after a certain number of rows (around 20 items).
Initial Problem:
Solution Provided:
A CSS code snippet was shared to add to the base.css file:
display: grid and grid-template-columns: 1fr 1frFollow-up Issues:
Status: The discussion remains open with unanswered questions about spacing adjustments and alphabetical sorting. Screenshots were shared to illustrate the problems.
Hello,
I have a question about the Dawn theme mega menu. As you can see in the screenshot, the rows under the mega menu extend infinitely downward. How can I adjust this so that, for example, after the 20th row, it starts moving to the right? It’s also important that it remains mobile-friendly.
Thank you!
Hi @denisaydin , could you share your store link?
Hey @denisaydin
Could you please provide your Store URL and, if applicable, the Password too? Your cooperation is greatly appreciated!
Best Regards,
Moeed
Hi @denisaydin
You can add this code at the bottom of your base.css file to check
@media (min-width: 768px){
.mega-menu .mega-menu__list--condensed {
display: grid !important;
grid-template-columns: 1fr 1fr;
}
}
Thank you so much for the quick reply!
The gaps between items are too wide. How can we reduce this? Also, is it possible to have the items sorted alphabetically?
