How can I center the header menu in the Dawn theme?

[Questions1]

How to center the header menu of Dawn theme? Just the header menu, not the logo. By default it is aligned to the left side. Thanks.

[dmwwebartisan]

@Questions1 

Please share your store URL!

Thanks!

[Questions1]

URL: spetz.no

[dmwwebartisan]

@Questions1 

Please add following css your assets/base.css bottom of the file.

@media screen and (min-width: 990px){
.header--middle-left .header__inline-menu {
    margin-left: auto;
    min-width: 1200px !important;
    text-align: center !important;
    width: 100% !important;
}
}

Thanks!

[diego_ezfy]

@Questions1, do this to fix it in 20 seconds:

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 (min-width: 990px){
    .header{
    display: flex !important;
    justify-content: space-between !important;
}
}

Kind regards,
Diego

[Riffking19]

Top Man! 20 seconds! Done!

Big Thanx

[ThomasBorowski · Accepted solution]

Open assets/base.css in the code editor, look for this code around line 1887, and replace the first auto with 1fr.

Before:

After:

[PacCloudSeafood]

Does this still work for Dawn 9 or 10?

[Dylan49]

Si quelqu'un a besoin, cela fonctionne encore sur 13.0 et se trouve a la ligne 2421 dans le code - chez moi.

Cordialement

[joohny]

Thank You in 2024 😍

[DB160]

Hi

Simply add the following to the end of your base.css file

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

.header__inline-menu {
justify-self: center; /* start | center | end */
}

You can set the menu postion to left, center or right by changing justify-self to start, center, or end respectively

Darren

[websensepro]

Checkout our video tutorial if you are a beginner