Can I centralise my header menu? Dawn 2 theme

Store Design

Topic summary

Central issue: Center the header menu in the Shopify Dawn 2 theme so it remains centrally aligned across different screen sizes.

Proposed approach: A reply suggests editing theme code (Online Store > Themes > Actions > Edit code) and adding CSS in base.css within a desktop-only media query (min-width: 991px). It uses Flexbox on .header–has-menu and sets nav.header__inline-menu to text-align: center and position: unset. A screenshot link and code snippet are central to the suggestion.

Technical context: Dawn 2 is a Shopify theme. The solution relies on CSS (media queries and Flexbox) to control layout on larger screens.

Clarification: The original poster indicates they want the menu centered relative to the entire page, not just spaced within the header elements, implying the suggested CSS may not achieve full page-wide centering.

Status: No confirmed fix or decision. The thread remains open, and the key question—achieving true page-centered alignment across all screen ratios—is unresolved.

Summarized with AI on February 21. AI used: gpt-5.
1

Good morning,

I have been trying to centralise my menu in the header of my site. Is there a way of setting this so it stays relative like this when browsing on different screen ratios?

Basically i just want it central alignment at all times.

my site: www.generationaudio.co.uk

Thanks in advance!

2

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset >base.css and paste this at the bottom of the file:
@media screen and (min-width:991px){
    .header-wrapper .header--has-menu {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        column-gap: 0;
    }
    
    .header-wrapper .header--has-menu h1.header__heading {
        width: auto;
    }
    
    .header-wrapper .header--has-menu .header__icons {
        width: auto;
        justify-content: flex-end;
    }
    
    .header-wrapper .header--has-menu nav.header__inline-menu {
        width: auto;
        position: unset !important;
        text-align: center;
    }
}

Screenshot:-Screenshot by Lightshot

3

Thanks for your reply. Sorry, I was thinking more central to the whole page so it doesn’t look out of line