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

Store Design
, , ,
1

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!

landing_nav_engaged.jpg
landing_nav_engaged.jpg3950×2534 459 KB

2

Hi @RGap ,

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

3

www.orangebootswine.com

4

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.

BSSCommerceTC_0-1720952668524.png
BSSCommerceTC_0-1720952668524.png1901×952 300 KB

5

It didn’t work.

6

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:

BSSCommerceTC_0-1720953306485.png
BSSCommerceTC_0-1720953306485.png1442×751 250 KB

After:

BSSCommerceTC_1-1720953322987.png
BSSCommerceTC_1-1720953322987.png1445×759 193 KB

7

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

8

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:

BSSCommerceTC_0-1720953711471.png
BSSCommerceTC_0-1720953711471.png1916×864 241 KB

1 Like
9

Great, that worked.

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

10

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

1 Like
11

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

12

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

1 Like
13

Got it - thank you very much!!

14

Hi @RGap

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

1 Like