I’m using the dawn theme and I can’t figure out how to reduce the width of the mega menu in my main header to be just the size of the content (like the dropdown option). I also need it to be centered under the dropdown option. Right now, the mega menu takes up the full width of the viewport, and my second mega menu (more) is left-aligned for some reason. I’ve tried the fixes I’ve seen on other posts like adding width: max-content !important under various functions, but none of it has worked. All it does it reduce the width so much that only one or two characters fit on each line and the mega menu becomes extremely long and illegible.
Topic summary
A user is experiencing layout issues with the mega menu in Shopify’s Dawn theme. The mega menu currently spans the full viewport width instead of fitting to content size, and needs to be centered under its dropdown trigger.
Current Problems:
- Mega menu extends across entire screen width
- Second mega menu (“more”) appears left-aligned instead of centered
- Attempted CSS fix (
width: max-content !important) causes text to collapse into 1-2 characters per line, making content illegible
Desired Outcome:
- Mega menu width should match content size (similar to standard dropdown behavior)
- Menu should be centered beneath its parent navigation item
Screenshots show the current full-width implementation and misalignment issues. The discussion remains open with no solutions provided yet.
1 Like
Dawn