Why is the drawer menu not visible on mobile after adding a css mask to my header?

[McCarthyKP]

Hi! 

I recently added a scalloped border to my header via a css mask property on the header-wrapper in base.css as shown in the code below. This achieved what I wanted visually, but on mobile, the drawer menu is no longer visible.

Code:

.header-wrapper {
  --mask:
    radial-gradient(13.99px at 50% calc(100% - 19.20px),#000 99%,#0000 101%) calc(50% - 24px) 0/48px 100%,
    radial-gradient(13.99px at 50% calc(100% + 7.20px),#0000 99%,#000 101%) 50% calc(100% - 12px)/48px 100% repeat-x;
  -webkit-mask: var(--mask);
          mask: var(--mask);
  margin-bottom: -19px;
}

Before:

After:

[shreyhweb]

@McCarthyKP 

give us the store URL then we will able to help you.

[McCarthyKP]

Thank you! I DM'd you the url & password

[shreyhweb]

@McCarthyKP 

we will check it.

[shreyhweb · Accepted solution]

@McCarthyKP 

Please replace your code with below code in you base.css file.

.section-header .header-wrapper {
--mask:
radial-gradient(13.99px at 50% calc(100% - 19.20px),#000 99%,#0000 101%) calc(50% - 24px) 0/48px 100%,
radial-gradient(13.99px at 50% calc(100% + 7.20px),#0000 99%,#000 101%) 50% calc(100% - 12px)/48px 100% repeat-x;
-webkit-mask: var(--mask);
mask: var(--mask);
margin-bottom: -19px;
}
.section-header.menu-open header-wrapper {
--mask: unset!important;
}

I hope menu drawer will working.

Let us know the result after adding the given code.

Thankyou 🙂

[McCarthyKP]

Thank you so much! This did the trick 😄

[shreyhweb]

@McCarthyKP 

Our pleasure 🙂

[deligorge]

Hi, I am having a similar issue and adding this code to base.css file doesn't seem to work. When I add this code the header masks my dropdown menu like this -

please help!