Hello Everyone!
I want to add more collections under the collection image in the mega menu.
There will be 4 collections per line and there will be no limit to the number of collections added to the mega menu. I am not able to add more than 4 collections now. Also, I want to remove the border line. Please help me. Thank you.
Store: https://urbanglowingstore.myshopify.com/
Password: Admin
Hi @dreamtechzone_5 For adding more collections under the collection image in the mega menu and removing the borderline, try these steps:
- Mega Menu Code Edit
In the theme.css, base.css, or component-mega-menu.css insert the below code
/* Adjust the mega menu grid to allow more collections per row /
.mega-menu__collections {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
gap: 15px !important; / Adjust spacing between collections */
}
/* Optional: Adjust collection image size */
.mega-menu__collection img {
width: 100% !important;
height: auto !important;
object-fit: cover;
}
- Removing the Mega Menu Border Line
Use this code
/* Remove the border line from the mega menu */
.mega-menu__collections,
.mega-menu__collection {
border: none !important;
}
Let me know if these work or need more assistance.
1 Like
I have pasted the code but it is not working.
I still can’t add more than 4 collections.
Hey, Are you there? Please help me. Thank you.