How to make the collection banner full width?

[someeeeeean]

Hello, I am trying to make the collection banner full width of the screen. However, I cannot figure out how to do so.

I also want to position the text in the center.

Is there any way I can make the header transparent as well?

It’s already transparent for the landing page. But this banner image does not get in the background as it does for the landing page.

Website: healandgrow.net

password: meinaw

[layoutbase]

Hi @someeeeeean , it’s Layoutbase here.

We would like to provide you with our thoughts on your question.

Just had a look at your store and we don’t see the banner show now.

But kindly let us suggest some possible solutions to you.

To make the banner full width,

1. Go to Online Store->Theme->Edit code
2. Assets/component-collection-hero.css add CSS below to line 37

@media screen and (min-width: 750px) {
  .collection-hero {
    padding: 0;
  }

  .collection-hero__inner {
    align-items: center;
    /*flex-direction: row;*/
    padding-bottom: 0;
    max-width: none;
   padding: 0;
  }
}

To position the text in the center,

.collection-hero__text-wrapper {
	position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%,-50%);

To make the header transparent, remove

#MainContent {
   padding-top: 130px;
}

Hope you find our suggestion helpful.

Best regards,

Layoutbase

Please let us know if you find it helpful by giving us a LIKE and Mark as Solution.

Layoutbase is a leading Shopify page builder. Give us a try HERE!

[someeeeeean]

Hello, thank you for the help.

The width problem is solved. But the text code does not work. Also, if I remove the main content padding, the other pages’ content also shifts to the header, which I do not want. If you go to my website, you will see the banner now.

[layoutbase]

Hi @someeeeeean , to fix the problem mentioned above, please add the following code at the bottom of the page Assets/template-collection.css (Only this page),

#MainContent { padding-top: 0!important; } 
.collection-hero.collection-hero--with-image { padding: 0!important; }

For text positioning, try to add the following code at the bottom of the file assets/component-collection-hero.css,

.collection-hero--with-image .collection-hero__text-wrapper {
display: flex;
    justify-content: center; 
}

Hope you find our suggestion helpful.

Best regards,

Layoutbase

Please let us know if you find it helpful by giving us a LIKE and Mark as Solution.

Layoutbase is a leading Shopify page builder. Give us a try HERE!

[someeeeeean]

Hello, the header has been sorted out. But the text is still not aligned to the center.

Is there a way I can put the text below the image instead of on the image?

[layoutbase]

Hi @someeeeeean ,

please add the following code under the file assets/component-collection-hero.css.

.collection-hero--with-image .collection-hero__inner .collection-hero__image-container  > img{
	position: static !important;
	max-height: 30rem;
}
.collection-hero--with-image .collection-hero__inner .collection-hero--with-image .collection-hero__text-wrapper {
	position: static!important;
}

After adding, your page should look like this.

Hope you find our suggestion helpful.

Best regards,

Layoutbase

Please let us know if you find it helpful by giving us a LIKE and Mark as Solution.

Layoutbase is a leading Shopify page builder. Give us a try HERE!

[someeeeeean]

Hello, the page looks like this.

[contactdaiquiri]

Hi @layoutbase ,

Allowing myself to jump in as I’ve been looking for a similar solution for hours and your post is the closest to chat I’m looking for.

I would like to make the image banner full width, covering the header, in my collection pages.

However your codes do not work on my website.

Theme: Dawn 6.0.2

Preview link to my website: https://wuje49c1cyjg82mn-66207744226.shopifypreview.com

Currently looking like this:

Really appreciate your help.

Pauline

[layoutbase]

Hi @contactdaiquiri ,

1. Go to Online Store → Theme → Edit code
2. Assets/template-collection.css
3. Add the code to the bottom of this file:

#shopify-section-header {

  margin-bottom: -100%;

}

.header-wrapper {

  background: none!important;

}

Best regards,

Layoutbase - drag & drop page builder

[contactdaiquiri]

Hey @layoutbase ,

Thanks a million for taking the time! It worked. Really appreciate it.

Looks perfect on collection pages.

However it’s not looking good on product pages : header overlapping weirdly with image and desc. I would rather keep the header space above image and desc for product pages.

What do you think ? Is it fixable ? Thank you so much.

[contactdaiquiri]

Hey @layoutbase ,

Sorry to ask again, any idea how to fix this / use a different code ?

Thank you so much.

[fanshoes]

How do Remove the image container in the collection banner in my Dawn Theme? I just want the collection description to show, and I want the description to be centered, along with the collection title above it.

Thank you

[RicardoDesign]

Hi there, could you look at my theme and help me with getting different/custom banner images on my collection pages please? I have an image here on this page https://theglamexperienceonline.com/collections/glam-collection-hair-care-product but I can’t seem to find where to add the image on other pages, for example this page https://theglamexperienceonline.com/collections/eyes

There must be some overlapping code somewhere because if I remove breadcrumb the image gets removed too.

Thanks in advance.