A user seeks help centering dropdown submenu items in the Dawn theme, which currently align left by default.
Proposed Solution:
A CSS fix was provided targeting specific mega menu elements:
text-align: center to #MegaMenu-Content-2.mega-menu__list and related classes to use display: inline-block and unset width propertiesThe original poster confirmed the solution worked for their case.
Follow-up Issue:
Another user reports inconsistent alignment across different menu sections—submenus under “Accessories” center correctly, but those under “DateType” and “Clothing” remain left-aligned, suggesting the CSS may need adjustment for broader application across all dropdown menus.
Note: Some text in the thread appears reversed/encoded, and preview links are referenced for visual context.
when a user hovers over the nav bar header dropdown menu, how do I make the dropdown menu items to be aligned in the center?
Right now they are all aligned to the left.
Please refer to the video below in the attachments for much cleaner clarification.
Thank you
URL: Abbasi (theabbasiandsons.myshopify.com)
Password: testingpage
@justauser
Please write this css in bottom of the css file.
#MegaMenu-Content-2 {
text-align: center;
}
.mega-menu__list.page-width.mega-menu__list–condensed {
display: inline-block;
}
.header–top-center .mega-menu__list > li {
width: unset;
}
@LetsCode Thank you
How to you align all the submenus below to be centered? Under accessories its centered but under the DateType and Clothing menu they are aligned left. Please preview my link
