A user needed help restructuring their Shopify megamenu to display 5 columns per row instead of requiring horizontal scrolling when more than 8-10 columns are present.
Solution Provided:
flex-wrap to allow columns to wrap to new rowsflex: 1 1 calc(12% - 20px) with 20px gap spacingOutcome:
Hello Everyone!
I am trying to create a mega menu but when I have various columns (more than 8 or 10) I want each heading to move into a second row, rather than having to scroll across. I want to have 5 columns per row. Please help me. Thank you.
Store: https://urbanglowingstore.myshopify.com/
Password: Admin
What I want.
Hi @dreamtechzone_5 ,
Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css file Add the provided code at the end of the file.
@media (min-width: 769px){
.mega-menu__column {
flex: 0 auto;
margin: 21px 75px 0px 0px !important;
display: block !important;
flex: 1 1 calc(12% - 20px) !important;
box-sizing: border-box;
}
.mega-menu__inner {
display: flex;
flex-wrap: wrap; /* Allows columns to wrap to the next row */
gap: 20px !important; /* Adds spacing between columns */
width: 100%;
}
}
Please mark the solution. @dreamtechzone_5
