Solved

How to center the menu of 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 Expert
803 71 239

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 8 (8)

dmwwebartisan
Shopify Partner
12282 2546 3694

@Questions1 

Please share your store URL!

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Questions1
Visitor
2 0 2
URL: spetz.no
dmwwebartisan
Shopify Partner
12282 2546 3694

@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!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

diego_ezfy
Shopify Partner
2936 562 883

@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

◦ Follow my blog & youtube for coding tutorials. Most questions in here are already answered there!
◦ Top #4 Shopify Expert, 24h reply. Click here to hire me.
Download copy/paste code snippets that can replace most apps.

ThomasBorowski
Shopify Expert
803 71 239

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

DB160
Shopify Partner
21 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