It’s possible to build a graphic-rich nav, using WebFlows’s in-built navigation elements, however you’ve got a few things to consider;
- Your menu items, e.g. “story”, “cafe”… will probably work best as floating PNG’s or SVG’s, with a white border, over top of your pink striped background. That gives them a bit of flexibility in layout. So you’d need to separate the foreground menu art, from the background (pink stripes and icons)
- Your home button in the top right presents a different alignment challenge, but can probably be worked out.
- The black icons in your background art will likely touch your menu objects, and create some visual confusion. You might consider changing those icons to gray, or a pink/red variant, so they are distinct.
In short, you can go with a custom Nav, or heavily stylize WebFlow’s in-built Nav. There are pros and cons both ways. The reason I’d try to make WebFlow’s nav work is that you get the mobile nav variant, and the “current” CSS styling indicator. That means e.g. at desktop breakpoint, you can indicate which page they’re on by changing the graphic color of the art piece, or perhaps apply border or shadow styling.
On an unrelated note, some of your layouts like Cafe might be difficult to mobilize. If you’re OK with changing the overall feel, I’d separate each of the elements, “Jamface”, the image, the opening hours, the menu, the directions into discrete elements… and CSS Grid them so you can rearrange at each breakpoint.