How can I remove black overlay from mobile view menu?

Shopify Discussion
1

@LitCommerce Hello there I have encounter issue after I make changes to base.css code to add search bar. When I click on the toggle menu ( hamburger menu) in mobile view there is black overlay on the screen how can I get rid of this.

website link : https://www.eshoop101.com

2

I have found the solution delete or comment

/*height: calc(var(–viewport-height, 100vh) - (var(–header-bottom-position, 100%))); */

.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: rgba(var(–color-foreground), 0.5);
}

3

.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: rgba(var(–color-foreground), 0.5); }

4

Hi @eShoop101 ,

Please return the code, I will help you check it

5

You mean I should remove the comment and return to the original code .

6

Hi @eShoop101 ,

Yes, I will you check it again

7

Thank you I already returned the code you can check it now

8

Hi @eShoop101 ,

Please change code:

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

=>

.menu-opening .header__icon--menu:before

it will work fine

1 Like
9

Thank you that works well

1 Like