How to Only Change the Color of the Page Overlay when the Drawer Nav is Engaged?

[RGap]

Hi,

I want to change the overlay color to a medium gray where the red arrow points on the screenshot (a shot of when the drawer nav is engaged/clicked on). I know I can change it by going to the color scheme of the header. The problem is it also changes the color of the header icons, which I don't want. I only want the color of the overlay on the page to change.

Thanks!

 

[BSSCommerce-TC · Accepted solution]

Hi @RGap ,

You can replace the previous code with this code.

.header__icon--menu[aria-expanded=true]:before {
    background: rgba(128, 128, 128, 0.4) !important;
}

And result is:

[BSSCommerce-TC]

Hi @RGap ,

Can you kindly share your store link (with the password, if any) and color code with us? We will help you

[RGap]

www.orangebootswine.com

[BSSCommerce-TC]

Hi @RGap ,

You can follow these steps

Step 1: Go to Online store > Themes > Edit code and find base.css file

Step 2: Insert below code at the end file and Save them

#shopify-section-template--17576754315427__rich_text_bEUCVa {
   position: relative !important;
}

section#shopify-section-template--17576754315427__rich_text_bEUCVa:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(128, 128, 128, 0.4);
    pointer-events: none;
    z-index: 1;
}

And this is final result you want.

[RGap]

It didn't work.

[BSSCommerce-TC]

Hi @RGap ,

I have checked and there is an overlay color layer. Is this the result you were expecting? Please provide more details. We are always ready to help you.

Before:

After:

[RGap]

That is what I want but it's not showing on my end after I added your code. 

[BSSCommerce-TC · Accepted solution]

Hi @RGap ,

You can replace the previous code with this code.

.header__icon--menu[aria-expanded=true]:before {
    background: rgba(128, 128, 128, 0.4) !important;
}

And result is:

[RGap]

Great, that worked. 

If I want to use a different color I can just change the rgb numbers, yes?

[BSSCommerce-TC]

Hi @RGap ,

Exactly. If you want any specific color code, please let us know. We can help you.

If our suggestions are useful, please let us know by giving it a like, marking it as a solution. Thank you very much

[RGap]

Is there a way to change the opacity of the overlay? At what level is it now?

[BSSCommerce-TC · Accepted solution]

Hi @RGap ,

You can change the final parameter.

background-color: rgba(128, 128, 128, 0.8); /* with 80% opacity */

background-color: rgba(128, 128, 128, 0.4); /* with 40% opacity */

If our suggestions are useful, please let us know by giving it a like, marking it as a solution. Thank you very much

[RGap]

Got it - thank you very much!!

[BSSCommerce-TC]

Hi @RGap 

We're happy to see that our suggestion helped you solve the issue.