Athens Theme: The logo is on the top left. How to center it in the middle of the page?

[LDRM]

How can I move the logo on the header to the center of the page?

[Guleria]

Hello @LDRM ,

Please share the store URL.

Regards
Guleria

[goldi07]

Hello @LDRM To center the logo in the Athens Shopify theme header (currently on the top left), you’ll need to adjust the header’s layout using either theme settings (if available) or by editing the theme’s code.

Option 1: Check Theme Settings First
1. From your Shopify admin, go to Online Store > Themes.

2. Click Customize on the Athens theme.

3. In the theme editor, navigate to the Header section.

4. Look for a layout option like Logo alignment or Header layout.

. If available, select Center or Centered logo.

. Save the changes.

If the theme doesn’t offer this option, continue to code customization.

Option 2: Edit the Theme Code
1. From Online Store > Themes, click ... > Edit code on the Athens theme.

2. Open the file:
sections/header.liquid

3. Look for the logo code. It’s usually inside a wrapper like this:

<div class="header__logo">
  {{ 'logo' | image_url: width: 200 | image_tag }}
</div>

4. Wrap the entire logo area and navigation in a flexbox container OR change the logo container’s CSS.

Recommended CSS Override Method
Rather than deeply editing the structure, you can just use CSS to center the logo.

Steps:

1. In the code editor, go to Assets > base.css (or theme.css, style.css, depending on version).

2. Scroll to the bottom and add this code:

.header__logo {
  margin: 0 auto;
  text-align: center;
}

.header__heading,
.header__heading-link {
  justify-content: center !important;
  display: flex !important;
}

.header__inline-menu {
  justify-content: center !important;
}

This will:

. Center the logo block horizontally.

. Make the link around the logo behave properly.

. Prevent the navigation from conflicting with logo alignment.

Optional: Hide Side Menu for Clean Centering
If your header layout includes menu items on the left or right, you might want to hide or reposition them for a perfectly centered logo.

You can hide them temporarily with:

.header__inline-menu {
  display: none;
}

But if you want to keep the nav and center the logo above it, let me know — that layout requires a stacked header layout which I can guide you through.

If it does not work then share the link of your store and I will check it and fix it. Do you want to set it in mobile also?

Thank you 😊