How can I center my mega menu in the Craft theme?

Topic summary

Centering the header menu in the Shopify Craft theme, where 4 menu items appear a few pixels off-center. The goal is to nudge the menu slightly to the right for pixel-perfect alignment.

Context: The store URL and password were shared, enabling inspection via DevTools. Screenshots were referenced to show current CSS.

Findings: The menu container already has justify-self: center, which should center it. For fine-tuning, a manual offset is needed.

Proposed fix (desktop only):

  • Edit Online Store > Themes > Edit code > base.css.
  • Inside a media query for screens ≥ 990px, target .header–top-center .header__inline-menu and add either:
    • padding-left: [n]px; or
    • margin-left: [n]px;
  • Adjust n (e.g., 1px) until visually centered, then save changes.

Notes: The suggestion balances theme defaults with a minimal CSS nudge. Images (DevTools screenshots) support the analysis but aren’t required to apply the fix.

Status: A solution was provided; no confirmation yet from the original poster, so resolution remains unconfirmed.

Summarized with AI on January 9. AI used: gpt-5.

Hi @ag2023 , can you share your store url?