How to make header full width in Dawn Theme

[blushingbelle]

Hello! I would like to make my header full width in Dawn Theme. It currently has side padding with a different color. How can I change this?

[suyash1]

@blushingbelle - can you please share your website link?

[Tech_Coding]

Hello @blushingbelle 

You can add code by following these steps

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file

3. Paste the below code before </body> on theme.liquid
<style>
   .header-wrapper {
      max-width: 100% !important;
    }
</style>
RESULT:

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.

[Dan-From-Ryviu]

Hi @blushingbelle 

Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings. 

header {
max-width: 100% !important;
}

[DaisyVo]

HI @blushingbelle ,

You can follow the steps here:

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/ypQ7nly2wv27
Step 3: Copy the code below and paste it there

Here is the code for step 3:

header.header {
    max-width: 100% !important;
}

This is the code applied for Dawn Theme.

Please let me know if it works!

Best,

Daisy

[GTLOfficial · Accepted solution]

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

@media screen and (min-width: 990px) {
.header-wrapper.color-scheme-1.gradient.header-wrapper--border-bottom {
max-width: 100% !important;
}
.header:not(.drawer-menu).page-width {
max-width: 100% !important;
}
.header--middle-left .header__inline-menu {
margin-left: 33rem !important;
}
.header__menu-item {
padding: 2.2rem !important;
}
}

result

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

[blushingbelle]

This worked! Thank you!

[GTLOfficial]

Happy to help you...!!!
Please hit the like button also.

[oscprofessional]

Hi @blushingbelle ,

Go to Online Store > Themes > Actions > Edit Code > base.css
Add below code in base.css  file

header.page-width {
    max-width: 100%;
}

[Kyle_liu]

Hi @blushingbelle 

You can edit theme code

.header-wrapper {
  max-width: 100% !important;
}

click Header section