Center header menu dawn theme

Store Design
, , ,

Topic summary

A user seeks CSS code to center-align the header menu in Shopify’s Dawn theme for their store.

Three solutions provided:

  1. Simple CSS approach (ZestardTech & vm-web):

    • Navigate to Online Store > Themes > Edit Code
    • Add CSS to base.css:
    .header--middle-left {
    grid-template-columns: 1fr auto 1fr !important;
}

  2. Alternative method (DaisyVo):

    • Insert custom CSS in theme.liquid before </head> tag
    • Uses media query for desktop screens (min-width: 1024px)
    • Modifies grid template and centers menu items with flexbox

Both approaches use CSS grid modifications to achieve center alignment. The first method is simpler with a single CSS rule, while the second provides responsive control and additional flexbox centering for menu items. Screenshots accompany each solution showing expected results.

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

Hi, can anyone share with me the code for center aligned header menu (Dawn theme)?

thank you in advance !

Password: meolyo

Daniel19901_0-1738234555216.png
Daniel19901_0-1738234555216.png797Ă—184 52.4 KB

1 Like
2

Hello @Daniel19901 ,

Here are the steps to apply the necessary changes in your Shopify store:

  1. In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
  2. Locate Asset > base.css and paste the following code at the bottom of the file:
.header--middle-left {
        grid-template-columns: 1fr auto 1fr !important;
}

ZestardTech_0-1738235011990.png
ZestardTech_0-1738235011990.png1898Ă—379 542 KB

Let me know if you need further assistance!

1 Like
3

Hi Daniel19901

I hope you are well. You can follow our instructions below:

1/ Shopify admin > Online store > Edit code: https://prnt.sc/M4p-gua99Uf4
2/ Search for “theme.liquid” file: https://prnt.sc/b6xveIKe-Rh2
3/ Open the file and search for tag and add the following code above tag: https://prnt.sc/KWtKYyZkDtYJ

Here is the code for Step 3:

{% style %}
@media screen and (min-width: 1024px){
header.header {
grid-template-columns: auto 1fr auto !important;
}
nav.header__inline-menu ul.list-menu.list-menu–inline {
display: flex !important;
justify-content: center;
}
}
{% endstyle %}

DaisyVo_0-1738236128730.png
DaisyVo_0-1738236128730.png1792Ă—393 529 KB

1 Like
4

@Daniel19901

  1. In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
  2. Locate Asset > base.css and paste the following code at the bottom of the file.
.header--middle-left {
        grid-template-columns: 1fr auto 1fr !important;
}

Thanks!

1 Like