Header shape code masking header menu drop-down

Store Design
, , , ,

Topic summary

Issue: A custom header shape made with a CSS mask is unintentionally clipping the header menu drop-down.

  • The code applies a mask via radial-gradient to .section-header .header-wrapper and sets margin-bottom: -19px.
  • An attempt is made to disable the mask when the menu is open by unsetting the --mask variable for a menu-open state.

Context: CSS “mask” controls which parts of an element (and its children) are visible using an image/gradient; when applied to a container, it can also hide descendants like a drop-down.

Evidence: An attached screenshot shows the drop-down being cut off by the mask; the image is central to understanding the problem.

Latest response: A participant recommends code testing and consulting a Shopify developer; no specific fix was provided.

Status: Unresolved. Key question—how to prevent the mask from affecting the drop-down—remains open with no concrete solution or action items beyond seeking developer assistance.

Summarized with AI on December 24. AI used: gpt-5.
1

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?

Screenshot 2024-07-12 at 11.44.43.png
Screenshot 2024-07-12 at 11.44.43.png748×398 228 KB

2

Hi,

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