Hello Everyone!
Megamenu is showing in menu center when line break, it doesn’t look good. I want to keep it at the beginning.
Store: https://dream-candle-lights.myshopify.com/
Password: Admin
Topic summary
A Shopify store owner using the Dawn theme reported that their megamenu items center-align when they wrap to a new line, creating an undesirable appearance. They wanted the menu items to remain left-aligned at the beginning instead.
Solutions Provided:
Two community members offered similar CSS fixes:
- Option 1: Add CSS to
theme.liquidfile before the</body>tag - Option 2: Add CSS to the
base.cssfile at the bottom
Both solutions use the same CSS rule:
.mega-menu__list {
justify-content: flex-start !important;
}
Screenshots were provided showing the before state (centered menu items) and after state (left-aligned menu items). The issue appears resolved with either implementation approach, though adding to base.css is generally more maintainable than inline styles in theme.liquid.
You can add code by following these steps
-
Go to Online Store → Theme → Edit code.
-
Open your theme.liquid file
-
Paste the below code before on theme.liquid
RESULT:
My reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Hello @dreamtechzone_5 ,
Go to Online Store > Themes > Edit code > search for the base.css file and add this code at the bottom.
.mega-menu__list {
justify-content: start !important;
}
Reslts:
1 Like