How to make the header full width TASTE THEME

How to make the header full width TASTE THEME

PRETTYFRIDAYS
Pathfinder
197 0 35

Hey, I am updating the design on my store and with this design the best way to make it beautiful is with an almost full width header. Does anybody know how to do this via code? Thanks in regards!

LINK: https://e8aaa0-3.myshopify.com 

PASSWORD: mohwhi

theme; taste

Replies 9 (9)

Made4uo-Ribe
Shopify Partner
6961 1656 2041

Hi 

Just to clarify, your header is already full with. The remaining space on the left and right are only padding. You like to take this out too?

Made4uoRibe_0-1701810311824.png

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
PRETTYFRIDAYS
Pathfinder
197 0 35

Yeah, not fully, but a lot needs to be removed

Made4uo-Ribe
Shopify Partner
6961 1656 2041

But if you like to remove the remaining padding. Then this will be the result.

Made4uoRibe_0-1701811126472.png

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.
PRETTYFRIDAYS
Pathfinder
197 0 35

How do I do this?

Dorzay
Shopify Partner
3 0 0

Keeping responsiveness screen sizes in mind, I would recommend adding this CSS. The 1.2rem padding-left also accounts for an existing portion of the code placed on the header element, which adds -1.2rem. Attached a preview below.

 

 

 

media screen and (min-width: 990px) .header:not(.drawer-menu).page-width {
  padding-left: 1.2rem;
  padding-right: 0;
}

 

 

Screenshot 2023-12-05 at 1.32.30 PM.png

PRETTYFRIDAYS
Pathfinder
197 0 35

Where do I need to put this code?

Made4uo-Ribe
Shopify Partner
6961 1656 2041

Oh, Okay. I understand. Check this one then.

  • From your Shopify admin dashboard, click on "Online Store" and then "Themes".
  • Find the theme that you want to edit and click on "Actions" and then "Edit code".
  • In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

 

.header:not(.drawer-menu).page-width {
    padding-left: 12px !important;
    padding-right: 0px !important;
}

 

  • And Save. 

 

 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.

PageFly-Richard
Shopify Partner
4416 1007 1658

 

Hi there

 

This is Richard from PageFly - Shopify Page Builder App

 

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

 

<style>
header.header {
    padding: 0 0px 0 10px !important;
}

</style>

 

 

PageFlyRichard_0-1701822929934.png

 

Hope this can help you solve the issue 

 

Best regards,

Richard | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

GeorgiaKatee98
Visitor
1 0 0

Hi, I used this code on my site and it worked for the header really well, please could you help me as I am trying to add it to the whole site to get rid of the padding left and right to make it full screen width on desktop & phone? Thank you!