Header shape code masking header menu drop-down

[deligorge]

I am using this code to create a custom header shape on my site -

.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;
}

but the problem is it's also masking the header menu drop down (see image) , how can I fix this? 

[Small_Task_Help]

Hi,

Some testing needs to be done  in code , you can go for shopify developer