Dawn Template: Overlay Colour When I Click On "Filter"

[Angela86]

Hello, 

I have this problem, it turns pink when I click on "Filter", which I want to turn it darker as I click on "cart" or "search".
If you go "Single Origin" and then it appears the link to "filter" when I click on this, the background screen turns pink, and I just want to turn darker only.

I already added the coding in Base.css

details[open] .modal-overlay::after, .drawer { background: #333333; opacity: 0.8; }

details[open] .modal-overlay::after, .drawer {
background-color: #00000078 !important;
}

details[open] .modal-overlay::after {

background: hsl(0deg 0% 13% / 72%) !important;

}

However, it doesn't work with clicking on "Filter". I want it to become darker and not Pink

URL: www.doecoffee.com

How I can fix it?
Thank you

[Raj-webdesigner]

Add This Css In Base.css File

@media screen and (max-width:767px){
    .header__icon--menu[aria-expanded='true']::before{
        background: #0000009c !important;
    }
    details[open] .modal-overlay::after {
        background-color: #0000009c !important;
    }
    .drawer {
        background-color: #0000009c !important;
    }
}

[Angela86]

It doesn't work.
If you go "Single Origin" and then it appears the link to "filter" when I click on this, the background screen turns pink, and I just want to turn darker only.

[Raj-webdesigner]

Follow My Step,

1) Open Base.css
Find 2605 number LineCopy Name Is

.header__icon--menu[aria-expanded='true']::before {

Ctrl + D Past Name

 Than

.header__icon--menu[aria-expanded='true']::before {
  content: '';
  top: 100%;
  left: 0;
  height: calc(var(--viewport-height, 100vh) - (var(--header-bottom-position, 100%)));
  width: 100%;
  display: block;
  position: absolute;
  background-color: hsl(0deg 0% 13% / 72%);
}

 Change Code With This Code

2) Find Base.css 2676 number Line 

Copy This Name

details[open] .modal-overlay::after {

Past Ctrl + D Past It

Than

details[open] .modal-overlay::after {
  position: absolute;
  content: '';
  background-color: hsl(0deg 0% 13% / 72%);
  top: 100%;
  left: 0;
  right: 0;
  height: 100vh;
}

Change This Code 

Add This New Css In base.css Code

.drawer {
   background-color: hsl(0deg 0% 13% / 72%) !important;
}

[Angela86]

@Raj-webdesigner thank you for your reply, but it doesn't work either.

[Raj-webdesigner]

Dm Me in Personal
send Me collaborator Code

[Made4uo-Ribe]

Hi @Angela86 

I check your base.css there is a code that not belong on the base.css. That would be a cause of the commotion of the changes you want. 

This is a liquid code. This must be in the liquid file or in the theme.liquid. 

Try to to remove this one or add some comment sign. 

And Save. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[Angela86]

Hi, it doesn't work... either. @Made4uo-Ribe 

[Made4uo-Ribe]

Did you try to add on other file. Like the component-cart-drawer.css. And also please check the hex color that your using seems like a lot of zero. 

[Columbus_Themes]

On your Theme Settings, at bottom of the settings you can see "Custom CSS"

Add:

.header__icon--menu[aria-expanded="true"]::before {
background-color: red;
}

Let me know how things went.

[Angela86]

Hello, thanks @Columbus_Themes , but I don't want red. I just want to become darker when I click "filter" 
I want like this:

And not like the following:

This only happens when I click on "filter" which you can find it from the main page---> click on "Single Origin" ----> on the top of the corner of the photos we can find "filter", when you click on it, it opens the window to filter and the background is pink. And I want to change it darker as the first picture.

Thank you,

[Columbus_Themes]

Then change the color instead of red add any hex color code you need 😊