Re: How to center the menu of Dawn theme?

Solved

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

Questions1
Visitor
2 0 2

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.

Accepted Solution (1)

ThomasBorowski
Shopify Partner
803 71 242

This is an 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:

ksnip_20211123-194953.png

 

After:

ksnip_20211123-195117.png

★ Smart Upgrades, Tips and Tutorials for Shopify themes: cartpunk.com
Did my solution work? Help other Community members easily find the correct solution and apply it to their own stores by marking it as the Accepted Solution and giving it a Thumbs Up

View solution in original post

Replies 10 (10)

dmwwebartisan
Shopify Partner
12321 2552 3729

@Questions1 

Please share your store URL!

Thanks!

Questions1
Visitor
2 0 2
URL: spetz.no
dmwwebartisan
Shopify Partner
12321 2552 3729

@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
Shopify Partner
2969 571 910

@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;
}
}

 

diego_ezfy_0-1637662719085.png

 


Kind regards,
Diego

Riffking19
Visitor
1 0 0

Top Man! 20 seconds! Done!

 

Big Thanx

ThomasBorowski
Shopify Partner
803 71 242

This is an 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:

ksnip_20211123-194953.png

 

After:

ksnip_20211123-195117.png

★ Smart Upgrades, Tips and Tutorials for Shopify themes: cartpunk.com
Did my solution work? Help other Community members easily find the correct solution and apply it to their own stores by marking it as the Accepted Solution and giving it a Thumbs Up
PacCloudSeafood
Shopify Partner
12 0 11

Does this still work for Dawn 9 or 10?

 

Dylan49
Tourist
3 0 1

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
Visitor
1 0 0

Thank You in 2024 😍

DB160
Shopify Partner
22 0 9

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