Logo left and menu centred on the same line

Shopify Discussion

Topic summary

Goal: Keep the logo aligned left and the main menu centered on the same header line in the Shopify Dawn theme.

Steps and guidance:

  • Suggested to check Online Store > Themes > Customize > Header for positioning options; an image was shared illustrating these settings.
  • Limitation noted: Dawn allows changing the logo position but not directly centering the menu via the UI.

Solution provided:

  • Add a CSS snippet to theme.liquid right after the tag to center the menu on desktop:
    • @media (min-width: 990px) { .header–middle-left { grid-template-columns: 1fr auto 1fr !important; } }
  • Explanation: A media query targets screens ≥990px. The grid-template-columns layout creates equal left/right space with the menu centered (“auto”) while keeping the logo in the left section.

Outcome and status:

  • The requester confirmed with thanks, implying the change worked.
  • No store URL was shared; no further issues reported. Discussion appears resolved.
Summarized with AI on January 2. AI used: gpt-5.
1

Hoping someone can help i’m trying to keep the logo left and the main menu centred on the same line

1 Like
2

Hello @kristy87
can you share store URL?

3

Hi @kristy87

Dan here from Ryviu: Product Reviews & QA app.

You can check from your Online Store > Themes > Customize > Header, and check if it has the option to change your logo and menu as your request

Screenshot 2024-03-22 at 15.13.50.png
Screenshot 2024-03-22 at 15.13.50.png1959×561 181 KB

4

thanks Dan. It allows me to move the position of the logo but not the menu im using Dawn theme

5

After choosing that option, please add this code to the theme.liquid file after to center your menu

@media (min-width: 990px) {
.header--middle-left {
    grid-template-columns: 1fr auto 1fr !important;
}
}

Best Regards,

Dan from Ryviu

6

Thanks so much