how to customize SHAPE of standard menu bar

[PhMA]

dear community

we are using refresh theme and we have the following standard menu bar:

how can we change/adjust the SHAPE of the menu bar that it looks like this:

 

we are looking for a solution that is also fully responsive and mobile friendly and sticky bar and that is not slowing down the page....

many thanks

preview link: https://fu1ozzimzp0s3n2q-61049766108.shopifypreview.com 

[PaulNewton]

@PhMA you'd either make the entire central area a tall image pillar that overlaps and extends outside of the header (or section container) when NOT being scrolled, or use CSS pseudo elemements to fake extending that area with a 2nd image that's centered under the main image.

Either approach will take some fiddling though the latter is a bit more resilient to future changes using code, as the former option may need the pillar image remade everytime the header is adjusted.

There's also going the possible extra step of making the shapes borders emulate the currently selected products cutout/badge style i.e. limon's spiky badge vs jamaica curvy badge

If you need this customization implemented then contact me for 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.

[PhMA]

@PaulNewton  many thanks, sent you a message