How to make a wavy header - Symmetry theme

[Marissao6]

Hi!

I would like the same wavy header as this website, but in a different colour.

https://haiberlin.com/

My website is https://aceylabel.com/ password: ZVav.5*P>9dyL@L;

I have managed to create a wavy header for desktop and tablet. But it is still not possible for mobile.

Can someone help me with this one please?

Greetings

[Sweet_Savior_3]

Hello @Marissao6

The demo site is using a wavy background image behind the header. So you can do the same for your store.

Thanks

[Marissao6]

Yes that’s right! I already saw that. I also managed to make the wavy header. However, the hover in the menu has jumped. Does anyone know how I can correct this?

[MRamzan]

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

You can try this.