Struggling to center an item in the mega menu in phone view - dawn theme

Store Design
, , , ,

Topic summary

A user is experiencing alignment issues with mega menu items in mobile view on their Shopify Dawn theme store. The menu items are not centered as desired.

Proposed Solution:
Another community member suggests using Chrome’s element inspector (Ctrl+Shift+C) to identify the correct CSS selectors. Two CSS approaches are recommended:

  • Option 1: Target .menu-drawer__inner-submenu button.link--text with justify-content: center;
  • Option 2: Use text-align: center;, display: inline-block;, and width: 100%; on the same selector

The responder notes that positioning the arrow element separately may require targeting a different selector (.menu-drawer__inner-submenu button.link--text svg).

Status: The issue remains open with a technical solution provided but not yet confirmed as implemented or successful.

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
1

Hello dear community! I can’t seem to find a way to center the items below in the mega menu on phone view.

Anyone has any suggestions? Thank you in advance!
Website - MAISON MAGDALENA
Password - MaisonMagdalena.222

MagdalenaBB_0-1723748874780.png
MagdalenaBB_0-1723748874780.png515×804 11.6 KB

MagdalenaBB_1-1723748933363.png
MagdalenaBB_1-1723748933363.png507×750 11.5 KB

2

If using chrome browser press ctrl+shift+c to open the element inspector to help find the css selector to target an element for styling.

It should be

.menu-drawer__inner-submenu button.link--text {
 justify-content: center;
}

Alternatively override the flexbox

.menu-drawer__inner-submenu button.link--text {
 text-align: center;
 display: inline-block;
 width: 100%;
}

if your trying to position the arrow separately that selector should be “.menu-drawer__inner-submenu button.link–text svg” the selector.

1 Like