How can I get the header colour to stretch to full width?

[pardi87]

Hello community!

I hope you can help me! I have added this custom code which I pieced together over various community posts but I’m not quite where I need to be.

Context: For a specific page (template) only, I need the logo and header to be different. The logo I have managed and the header is (mostly) the right colour but it doesn’t stretch all the way across. I found a way to do it but the cart icon and navigation also stretched full width which isn’t what I want.

The desired outcome is that the purple goes to max-width on desktop (mobile is currently fine).

 {% if template contains 'page.nott-coffee' %}
<style>
.header__heading-logo-wrapper {
background-image: url("https://cdn.shopify.com/s/files/1/0893/2350/3957/files/Nott_Coffee_Purple_Box-2_80171ec0-04fd-480b-a96f-f0c0a788ab7e.jpg");
background-size: cover;
background-position: center;
background-repeat: none;
}
.header__heading-logo-wrapper img {
opacity: 0;
}
.header {
background: #3c2c6d;
}

Thanks!

[Made4uo-Ribe]

Hi @pardi87

Would you mind sharing the URL of the store page you are editing? Thanks!

[pardi87]

Hi there,

You can tell it’s my first post, can’t you

https://danelaw-coffee.myshopify.com/

password: coffee

Thanks,

Paul

[PageFly-Richard]

Hi @pardi87

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the 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

{% if template contains 'page.nott-coffee' %}

{%endif%}

Hope this can help you solve the issue

Best regards,

Richard | PageFly

[pardi87]

Thanks for your reply.

It didn’t work, but almost. Here’s what worked in the end:

{% if template contains 'page.nott-coffee' %} 
<style>
.header-wrapper {
background: #3c2c6d !important;
}
</style>
{%endif%}