A user seeks to modify their Dawn theme’s megamenu to display subcategories horizontally rather than vertically. They provide screenshots showing the current vertical layout and a mockup of their desired horizontal arrangement.
Solution Provided:
A CSS customization is offered to achieve the horizontal layout by adding code to the base.css file:
.mega-menu__list {
grid-template-columns: 200px 100% !important;
}
.mega-menu__list li:nth-child(2) ul.list-unstyled {
display: grid !important;
grid-template-columns: 200px 200px 200px 200px;
}
This targets the megamenu structure through base.css and uses CSS Grid to arrange subcategories in columns. The user confirms the solution works and appreciates learning how to target the megamenu through the base CSS file.
Hi All,
Apologies if this has been asked before, couldn’t find an answer.
Is there a way to display subcategory horizontal instead of vertical? What I mean is instead of the current version that’s on the site this:
I would like the site to display similar to this mockup I made:
Thank you very much for all of the assistance !
hi @Ottodebac
Can you send me your store link to check?
Hi @Ottodebac
Please add this code to your bottom of base.css file in your Online store > Themes > Edit code
.mega-menu__list {
grid-template-columns: 200px 100% !important;
}
.mega-menu__list li:nth-child(2) ul.list-unstyled {
display: grid !important;
grid-template-columns: 200px 200px 200px 200px;
}
Thanks so much Dan! Didn’t realize I could target the mega-menu through the base.css, helpful to know!
