How to change header position

Shopify Discussion

Topic summary

A user seeks to modify their Shopify Dawn theme header layout to match a reference design, specifically adjusting spacing and element positioning without affecting desktop menu styles.

Initial Solution:

  • Another user suggests adjusting theme settings to full width with max-width of 1600px and zero margins
  • This approach causes unwanted side effects on other layout styles (top-left, top-center positions)

Working Solution:
Custom CSS code successfully resolves the padding issue:

.page-width {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 0px;
  padding-right: 0px;
}

Remaining Challenge:
The user still needs help achieving the exact header layout from their reference image: logo positioned left, menu centered, and icons aligned right. They’re using 1600px width despite recommendations to use 1200px for better optimization on smaller screens (Chromebooks, 12" displays).

Status: Partially resolved. The padding issue is fixed, but the complete header alignment remains an open question with the helper offering continued private assistance.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

riya298_0-1744123261621.png
riya298_0-1744123261621.png1919×144 8.42 KB

In my dawn theme my header look like this I want my header according to this image below. Can somebody give me the proper code for this so that it just look same and also doesn’t effect the Desktop menu style position.

riya298_1-1744123311047.png

2

Go to online store setting and turn one the option make it full width and you can set max width to 1600 px I guess. In general select 1200 px and margins should set to 0 px.

hope this helps

3

No it’s not working if i do this my other styles like top-left, top-center got affected and creating a lots of issue. if possible please give another proper solution

4

.page-width{
max-width: 1200px;
margin: 0 auto;
padding-left: 0px;
padding-right: 0px;
}

copy and paste above code on your online store > theme setting > css code

5

Let me know if this works or not if not I can send you the screenshots

1 Like
6

Hey it is working fine and doesn’t effect my other styles also :blush: but one thing i want to know I gave max-width:1600px as you can see in the image.

riya298_0-1744136929668.png
riya298_0-1744136929668.png1919×112 19.9 KB

But according to my reference website my logo is in left corner, menu in the center and other icons are in the right corner. How can i do this so that it doesn’t effect my styles like top-left, top-center and all. Please help me in this also I attached the image below for the better understanding.

riya298_1-1744137077718.png
riya298_1-1744137077718.png1913×104 6.61 KB

i want my header exactly look like this

7

The width of your website 1600px is not optimised width small screen laptops such as chrome books, 12” inches screen shows your website content not properly. I would recommend to change it to 1200px for optimisation and and everything after automatic will set how you wanted

if I solve your issue regarding padding space of your header I would request you to please hit on the button found your solution from me :blush:

1 Like
8

Thankyou :blush:

9

Pleasure is all mine :blush:

10

Happy to help. Thank for your feedback

11

Hey can you please help me on the header??I’m not able to make it properly and also have one doubt

12

Go on the setting and change the width of your layout. If your user issue still not sort out msg me privately and I will look into it.
thanks