Moving my header banner color towards the left

[BrickBuidz]

Hi guys!  I need help with my website, so for all the website themes the banner is going across the entire website but is there a way I can move the banner to just the top left?

Here is my website:

https://31s9t78lrjydybk3-79949955347.shopifypreview.com

Heres How I want The Banner to Look Like:

I want the banner color to just go over the logo and thats it.

Any help would be greatly appreciated thanks!!

[PaulNewton · Accepted solution]

Roughly you'd remove/override the existing background colors; you'd also need to adjust any colors that were dependent on a contrasting background.

Then add custom css adding a psuedo element with the background color making a square of color then rotate it to get the slope then move it left/right up/down to get the alignment right.

https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css 

Example css:

.header-wrapper.color-accent-1.gradient {
    background-color: initial;
}

.header-wrapper:before {
 content:" ";

 position: absolute;
 z-index: 0;
 top: -150px;
 left: -150px;
 transform: rotate(45deg);

 display: block;
 width: 300px;
 height: 300px;

 background-repeat: no-repeat;
 background-color: red;
}

.header__heading-link {
 left: -110px;
 position: relative;
}

If you need this customization fleshed out contact me for services.
Please always provide context, examples: store url, theme name, post url(s) , or any further detail.
Contact Info in signature.

[BrickBuidz]

Thank you so much for the quick reply!! It added the sideways square but its red and overlapping the logo, can you please help me with this?