Can't see options on dropdown menu

Store Design
, , , , , ,

Topic summary

A user added custom CSS code to create a scalloped border on their header but now cannot see one of the dropdown menu options. The code uses CSS masking with radial gradients and a negative margin to achieve the scalloped effect.

Suggested Solutions:

  • Increase header height at the top
  • Adjust z-index values so dropdown items appear above the custom border
  • Consider making the header sticky only when scrolling up

Additional Issues Identified:

  • Header occupies approximately 1/3 of screen space, obstructing content visibility
  • Vestigial bottom border creates an unwanted line across the scallops
  • Lack of contrast between custom edges and background when scrolling
  • Accessibility concerns: body font size may be too small and text color transparency reduces WCAG AAA contrast compliance

A contrast checker tool was recommended to improve accessibility. Professional customization services were offered to properly resolve all issues.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

I added a scalloped border to my header and now I can’t see one of the dropdown menu options. Please help! Here is the code I added to the bottom of base.css:

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

My website is: oliveandhaze.com

annanguyen_1-1737831201931.png
annanguyen_1-1737831201931.png2780×654 91.6 KB

2

Hi @annanguyen you either need to add more height to the top of the header, and or make sure the z-index for affected items is higher than the custom border edging.

There’s also making sure the header is only stick when a users scrolls UP.

Right now you’ve made it so the header permanently insists on itself taking up ~1/3 of the screenspace instead of letting content be viewable unobstructed.

And there’s a vestigial bottom border creating a line across the scallops.

And then when scrolling there’s no contrast to the custom edges to the background so it looks weird as customers scroll pages more trying to see content because the header is in the way.

To improve the WCAG AAA contrast rating for accessibility you may want to increase the body font size, and remove the color transparency of the text , or drastically improve the pages contrast of background color to font colors

https://webaim.org/resources/contrastchecker/

If you want to get this fixed properly then contact me for customization services.
Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.