How can I have the header color fill the entire width?

Technical Q&A
, ,

Topic summary

Issue: A merchant needs a distinct logo and header for a single Shopify page; the header color (purple) should span full width on desktop. Mobile displays correctly, but desktop attempts cause the navigation and cart icons to stretch undesirably.

Context: The user combined code from forum threads but didn’t achieve the desired desktop effect. They shared their store URL (keenord.com) upon request for review.

Proposed fix: A contributor shared a reference screenshot of the intended full-width header and outlined steps to edit theme.liquid, instructing to insert custom code before the closing tag. However, the actual code snippet is not visible in the post.

Status: No confirmation from the original poster that the solution worked. The thread appears open with the key unresolved detail being the specific code required and whether it resolves the desktop stretching issue.

Notes: Images are central to understanding the target design and the suggested steps. The absence of the visible code snippet limits reproducibility of the proposed solution.

Summarized with AI on December 20. AI used: gpt-5.
1

Hi everyone in the community!
Hopefully you can assist me! Although I’ve incorporated this unique code that I put together from several community threads, I’m still not quite at my desired level.
Context: I require a distinct logo and header for a single page (template) like sgpa. The header and the logo that I oversaw are (largely) the correct color, but they don’t extend completely. I managed to accomplish that, but it’s not what I wanted with the navigation and cart symbol stretching to fill the screen.

The purple should reach its maximum width on desktop (mobile is working properly at the moment).

1 Like
2

Hey @arlenkhalin

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

Hello @arlenkhalin
Our team is ready to help you.
Please share your website address and access password (if necessary) so that we can check and assist you.

4

https://keenord.com/

1 Like
5

BSSTekLabs_0-1725714952156.png
BSSTekLabs_0-1725714952156.png1907×588 160 KB

Do you want like this?

6
  • Here is the solution for you @arlenkhalin
  • Please follow these steps:

z5686811214059_e66de1953f1db631f9134af5cdb796ad.jpg
z5686811214059_e66de1953f1db631f9134af5cdb796ad.jpg1865×854 94.6 KB

  • Then find the theme.liquid file.
  • Then add the following code at the before tag and press ‘Save’ to save it.
  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.