How do I centralise logo on mobile header

Topic summary

A user seeks to center their logo in the mobile header for the Enterprise theme (Shopify 2.0).

Proposed Solutions:

Two support representatives offered CSS-based fixes:

  • Anthony (Beae Landing Page Builder): Suggested adding custom CSS before the </body> tag in the theme.liquid file, though the specific code snippet appears corrupted in the thread.

  • Richard (PageFly): Recommended inserting CSS into the main.css file using a media query targeting screens up to 768px width. The code applies flexbox properties (display: flex and justify-content: center) to center the logo element.

Status:

Both solutions involve editing theme files with CSS customizations. The discussion remains open with no confirmation from the original poster about whether either solution resolved the issue. The code snippets in the thread appear partially garbled, which may affect implementation.

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

How can i centralise the image header logo on mobile layout.

Theme: Enterprise (Shopify 2.0)

site url: https://gerconstruction.myshopify.com/

password: ger

Hi @octouk ,

This is Anthony from Beae Landing Page Builder, and I’m happy to assist you today.

While I acknowledge that this issue falls short of the desired outcome, I have an idea that I believe might be of help:

  1. Go to Online Store → Theme → Edit code
  2. Open your theme.liquid file
  3. Paste below code before :

Best regards,

Anthony

Hi @octouk

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:
Online Store ->Theme ->Edit code
Assets ->main.css

@media only screen and (max-width: 768px) {
.logo.flex.js-closes-menu {
    display: flex;
    justify-content: center;
}
}

Hope you find my answer helpful!
Best regards,
Richard | PageFly