FROM CACHE - en_header

Center Main menu in updated Dawn theme

Solved
ebon
Pathfinder
110 3 38

Does anyone have code to center the Main Menu in the updated Dawn theme?

url: preacha.com

Accepted Solution (1)

Accepted Solutions
dmwwebartisan
Shopify Partner
11139 2393 3433

This is an accepted solution.

@ebon 

Please remove previous css and add this new css class

@media screen and (min-width: 990px){
.header {
    padding-top: 0!important;
    padding-bottom: 0!important;
    display: flex !important;
}
.header__inline-menu {
    display: flex !important;
    margin: 0 auto !important;
}
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Click here GemPages The most powerful Shopify page builder.

View solution in original post

Replies 12 (12)
dmwwebartisan
Shopify Partner
11139 2393 3433

@ebon 

Please try this code 1. Go to Online Store->Theme->Edit code 2. Asset->/base.css-->paste below code at the bottom of the file.

.header.header--middle-left.page-width.header--has-menu {
  text-align: center;
}

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 | Click here GemPages The most powerful Shopify page builder.
dmwwebartisan
Shopify Partner
11139 2393 3433

@ebon 

Please remove provided css . i will check and send correct solution to you.

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Click here GemPages The most powerful Shopify page builder.
ebon
Pathfinder
110 3 38

Thanks for the code but it doesn't work

dmwwebartisan
Shopify Partner
11139 2393 3433

@ebon 

Please try this code 1. Go to Online Store->Theme->Edit code 2. Asset->/base.css-->paste below code at the bottom of the file.

@media screen and (min-width: 990px){
.header__inline-menu {
    display: flex !important;
    margin: 0 auto !important;
}
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Click here GemPages The most powerful Shopify page builder.
ebon
Pathfinder
110 3 38

still no good.

dmwwebartisan
Shopify Partner
11139 2393 3433

This is an accepted solution.

@ebon 

Please remove previous css and add this new css class

@media screen and (min-width: 990px){
.header {
    padding-top: 0!important;
    padding-bottom: 0!important;
    display: flex !important;
}
.header__inline-menu {
    display: flex !important;
    margin: 0 auto !important;
}
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Click here GemPages The most powerful Shopify page builder.
ebon
Pathfinder
110 3 38

Perfect!

thank you

dmwwebartisan
Shopify Partner
11139 2393 3433

@ebon 

If helpful then please Like Solution

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Click here GemPages The most powerful Shopify page builder.
VSLV22
Excursionist
24 0 7

This code doesn't work

Nbaum_21
New Member
2 0 1

Hi, new to Shopify;) Should this code be applied to base.css?

Thank you in advance

ebon
Pathfinder
110 3 38

It's where I placed it and it worked.

Nbaum_21
New Member
2 0 1

Thank you, I didn't see that part of the feed. 😉