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?
@blushingbelle - can you please share your website link?
Hello @blushingbelle
You can add code by following these steps
-
Go to Online Store → Theme → Edit code.
-
Open your theme.liquid file
-
Paste the below code before on theme.liquid
RESULT:
my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings.
header {
max-width: 100% !important;
}
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
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
1 Like
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%;
}
You can edit theme code
.header-wrapper {
max-width: 100% !important;
}
click Header section
This worked! Thank you!
Happy to help you…!!!
Please hit the like button also.