A Shopify store owner wants to modify their header banner color to appear only in the top-left corner instead of spanning the entire width of the site. They specifically want the colored area to cover just the logo region.
Proposed Solution:
:before) to create a colored squareCurrent Issue:
The initial CSS implementation created a red rotated square, but it’s overlapping the logo incorrectly. The user has shared screenshots showing the problem and is requesting further assistance to properly position the colored banner element.
Status: Ongoing troubleshooting of CSS positioning and styling.
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!!
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.
