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

Store Design
, ,

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.
1

Hello - I currently use the Craft theme for my online store. I’ve aligned a lot of the website, and the last piece is my header. I have 4 menu options, and they are aligned with themselves (spacing is correct, etc.) but they are not aligned with the website. They are a few pixels off from being in the accurate middle of the screen.

I’m looking for a way to add padding or margin to my menu to just push all 4 menu options a little bit to the right so that it looks even.

Any help would be greatly appreciated!

And a happy new year :slightly_smiling_face:

1 Like
2

Hi @ag2023 , can you share your store url?

3

Hi @ag2023 ,
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

1 Like
4

Hi! It is auspiciousgarments.com and password is ag2023

5

Hi! auspiciousgarments.com and password is ag2023

6

As far as I checked in DevTools, the element containing 4 menu options has the justify-self: center property. This property will help the element be centered.

view - 2024-01-03T142815.831.png
view - 2024-01-03T142815.831.png1919×920 420 KB

But if you still want to adjust the position of this element, you can do the following:

In Online store, select Themes → … → Edit code

In base.css, add the following code at the end of the file:

@media screen and (min-width: 990px) {
  .header--top-center .header__inline-menu {
    padding-left: 1px;
  }
}

or the following code:

@media screen and (min-width: 990px) {
  .header--top-center .header__inline-menu {
    margin-left: 1px;
  }
}

You can use 1px or any number you want

view - 2024-01-03T142955.395.png
view - 2024-01-03T142955.395.png1906×905 76.6 KB

Click Save to save changes.

Hope my answer helps you.

1 Like