How to change header to center align

Store Design
, , ,
1

Hi

I was trying to make the header transparent, but somehow it just changed to that, I have replace the header.liquid and theme.liquid files to the default one, but it remains the same. How can I change it back to the default Dawn theme header?

Stmz_0-1745050504065.png

2

Hey @Stmz

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

3

https://a9cafm-y3.myshopify.com/

Password: ealtai

4

https://a9cafm-y3.myshopify.com/

Password: ealtai

5

Hello @Stmz

  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:
header.header.header--middle-center.header--mobile-center.page-width.header--has-menu.header--has-account {
margin: auto!important;
}

devcoders_0-1745056968519.png
devcoders_0-1745056968519.png1344Ă—562 117 KB

6

Hello @Stmz
Go to online store ----> themes ----> actions ----> edit code ----> base.css
add this code at the end of the file and save.

#shopify-section-sections--16815864152143__header header {
margin: 0 auto;
}

result

111.png

If this was helpful, hit the like button and accept the solution.
Thanks

7

I added the code, but it still looks the same.

8

I don’t see there are any margin: 0 !important set with header tag in the header.liquid.

9

Hello @Sayed_Safin

please go to the header.liquid and theme.liquid files, search for this ID — #shopify-section-sections–16815864152143__header header, and remove the margin from it: margin: 0 !important;

devcoders_0-1745061299891.png
devcoders_0-1745061299891.png1365Ă—619 106 KB

10

I see, but I’ve searched both files and I don’t see that line of code anywhere.

11

Hey @Stmz

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1745062666722.png
Moeed_0-1745062666722.png1904Ă—723 99 KB

If I managed to solve your problem then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

12

Hello @Stmz
Kindly share your store access so that I can check and update you accordingly.

13

Problem has been solved, thank you

14

Hi Moeed,

That works, but it still looks kind of off. The right side is fine, but the left side – “Home” is still left aligned, that’s what I want to change, I want that to move closer to the center center.

Still appreciate your help tho!

15

Hey @Stmz

Keep the previous code and add this new code above in the end of theme.liquid file

.header__inline-menu {
    margin-left: 20px !important;
}
.header__icons {
    padding-right: 30px !important;
}

RESULT:

Moeed_0-1745064758908.png
Moeed_0-1745064758908.png1907Ă—924 122 KB

If I managed to solve your problem then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

16

It worked, thank you!