How do I move store menu items to middle and store logo to the left?

Store Design
, , ,

Topic summary

Goal: Center the store’s menu items in the header while keeping the logo aligned to the left, using the Dawn theme. An image illustrates the desired layout.

Requests/Context: A participant asked for the store/page link for troubleshooting. Another referenced a prior similar thread with a quick CSS tweak.

Proposed solutions:

  • Expand header width so content can center properly:
    .header.page-width { max-width: none; }
  • Dawn-specific desktop CSS via base.css to control header grid:
    @media (min-width: 768px) {
    header.header.header–middle-left.header–mobile-center.page-width {
    max-width: unset;
    grid-template-columns: 1fr auto 1fr; // centers navigation, logo left
    }
    }

Implementation steps: Online Store > Themes > Actions > Edit Code > base.css, add the code at the bottom.

Status: No confirmation from the original poster that the changes worked; the request for a live link suggests the issue may still be open. Images and a code snippet are central to applying the fix.

Summarized with AI on December 11. AI used: gpt-5.
1

image
image1906Ă—195 34.6 KB

Wanting my store categories to sit in the middle of the menu bar and for my store logo to sit nicely to the left of the page, would love some help using the DAWN theme

1 Like
2

@JGBowie can you please share this page link?

1 Like
3

Pretty sure it was already asked, what was wrong with those answers?

Maybe just add this to extend the header:

.header.page-width {
  max-width: none;
}
1 Like
4

Hi @JGBowie ,
Go to Online Store > Themes > Actions > Edit Code > base.css Add below code at the bottom of base.css file

@media (min-width: 768px) {
    header.header.header--middle-left.header--mobile-center.page-width {
        max-width: unset;
        grid-template-columns: 1fr auto 1fr;
    }
}

image
image1899Ă—900 57.8 KB