Can I make my collection banner overlay my header?

[astriddelin]

Hi,

I have the North theme in my Shopify Shop and I don’t like how the collection banners look. I have read that the North theme can provide different collection banner themes, but I don’t know how to do it.

I would like the collection banners to overlay the header and have text in the middle, just like on my frontpage. Do anyone know if that is possible?

My shop is www.fitscph.com

Password is Fitscph2450

Thank you!

[BSS-Commerce]

Hi @astriddelin

Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.

[astriddelin]

Hi, it’s:

www.fitscph.com

PW: Fitscph2450

[BSS-Commerce]

Hi @astriddelin

To edit the header, you can follow these steps:

1. Open Edit code at Online store > Themes > Edit code


2. Find the file “theme.liquid” and add the following code at the end of the tag:

3. Find the file “app.css” and add the following code at the end of the file:

.template-collection .header:not(.white-title) {
  border-bottom: none !important;
}

.template-collection div[id*="main-collection-banner"] {
  position: absolute;
  top: 0;
  left: 0;
  height: 400px;
}
.template-collection div[id*="main-collection-product-grid"] {
  margin-top: 270px;
}
.template-collection .collection-title {
  height: 100%;
}

.template-collection .collection-breadcrumb-row {
  top: 150px;
  text-align: center;
}

.template-collection .collection-title .row {
  text-align: center;
}

@media print, screen and (min-width: 48em) {
  .template-collection .collection-breadcrumb-row .medium-6 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

• Here is the result:

We hope that it will work for you.

[astriddelin]

Hi! It worked, but now something happened to the product-pictures (see picture). They overlay the collection banner? Do you know what to do?

[BSS-Commerce]

Hi @astriddelin

Can you kindly share your store password with us again?