Full width/height image banner for collections - DAWN THEME

[contactdaiquiri]

Hi everyone,

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

Theme: Dawn 6.0.2

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

Currently looking like this:

Really appreciate your help.

Pauline

[Prezentech]

Hi There,

Thank you for reaching out to the Shopify forums!

Let me quickly fix that issue for you.

Please add below CSS in your base.css file.

@media screen and (min-width: 750px) {
.banner--small:not(.banner--adapt) {
    min-height: 80rem;
}
}

#FooterCountryForm {
    position: absolute;
    top: 30px;
    left: 0px;
}
#FooterLanguageForm {
    position: absolute;
    top: 30px;
    left: 9%;
}

@media screen and(max-width: 992px) {
#FooterLanguageForm {
    position: absolute;
    top: 30px;
    left: 17%;
}
}

@media screen and(max-width: 992px) {
#FooterCountryForm {
    position: static;
}
#FooterLanguageForm {
    position: static;
    top: 30px;
    left: 17%;
}
}

If its working then, please do not forget to accept this solution
Thanks & Regards,
Prezen Tech

[contactdaiquiri]

Hi Prezentech!

Thank you very much for trying to help.

It’s not really working unfortunately.

However with the bellow code added to template-collection.css, I managed to do it.

But now I have a few issues with the product pages, 1) the image & desc completely overlap with the header and 2) the main menu is not aligned with the logo anymore…

#shopify-section-header {

  margin-bottom: -100%;

}

.header-wrapper {

  background: none!important;

}