How can I change the overlay color on collection page headers?

[zamandanoel]

Hi, I want to change the overlay color of the title area on my collection pages, but not change the overlay on the collection grid on the home page. 

I was able to accomplish this for the home page overlay with this

div#shopify-section-hero-1 .hero__overlay::before {
background-color: #416b52;
opacity: .9;
}

But can't figure out the collection listing page. 

I have tried these in theme.css - 

div#shopify-section-collection-template .hero__overlay::before {
background-color: #416b52;
opacity: .9;
}

div#Hero-hero-1 .hero__overlay::before {
background-color: #416b52;
opacity: .9;
}

div#collection-hero .hero__overlay::before {
background-color: #416b52;
opacity: .9;
}
div#collection-template .hero__overlay::before {
background-color: #416b52;
opacity: .9;
}

https://fat-beet-farm-kitchen-bakery.myshopify.com/collections/full-meals

password - aurtau

thank you!

[KetanKumar]

@zamandanoel 

please confirm this ok?

[zamandanoel]

Yes, I'll make it green but that's the color overlay i want to change. 

[KetanKumar · Accepted solution]

@zamandanoel 

yes please add this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.

.collection-hero__title-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #416b52;
    opacity: .9;
}

[zamandanoel]

That worked perfectly, thank you! 

[KetanKumar]

@zamandanoel 

its my pleasure to help us