Hey! I’m trying to make the bottom border of my header wavy with a thin black border line. I’m not sure the best way to implement this.
My header is going to be white, but I’ve inverted the header color here to show the issue. The waves can’t be seen since (I’m guessing) there’s some sort of sizing issue with either the header element or the banner image element?
I also tried creating a mask, but had the same results plus a broken navigation.
Here is a photo of how I want the header to look, which works with a mask on .header-wrapper with the following code in base.css:
.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;
}
The issue with this is my menu drawer will no longer open up, and I cannot navigate to any other pages through the header menu.
Here is a complete solution for adding waves in your shopify store section.
Video Guide: https://youtu.be/lqvhTrNzKVc
#shopify-section-{{ section.id }} {
transform: translateY(-102px);
margin-bottom: -102px;
--mask: radial-gradient(96.55px at 50% 136.5px, #000 99%, #0000 101%) calc(50% - 140px) 0 / 280px 100%, radial-gradient(96.55px at 50% -66.5px, #0000 99%, #000 101%) 50% 70px / 280px 100% repeat-x;
-webkit-mask: var(--mask);
padding-top: 100px;
background: red;
}
Let me know if you face any issue
the issue is not really the waves, it’s the header. Shopify headers are fixed and don’t like being reshaped. When you mask the header, it hides parts of it, so the wave disappears or breaks the menu. The safer way is to keep the header normal and fake the wave with a small shape or SVG under it. This gives the same look without breaking anything. Hope this helps