how to customize SHAPE of standard menu bar

Retired Boards Appdev Store Design
,

Topic summary

A user working with the Refresh theme wants to modify their standard horizontal menu bar to have a distinctive curved/pillar shape that extends vertically, creating a visual centerpiece (as shown in attached screenshots).

Proposed Solution:
Two main CSS approaches were suggested:

  • Create a tall image pillar that overlaps and extends outside the header container when not scrolled
  • Use CSS pseudo-elements to add a centered secondary image beneath the main navigation

The second approach is recommended as more maintainable for future theme updates.

Additional Considerations:

  • The solution should be fully responsive and mobile-friendly
  • Must function as a sticky bar without slowing page performance
  • Optional enhancement: add curved borders matching the product badge style (like cutout shapes)

Status: The discussion remains open. The user expressed interest and sent a direct message for further implementation details.

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

@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.

1 Like