Streaming live at 10am (PST)

Side navbar navigation with pictures

Hey there everyone

I’m just writing because my client wants her site to look exactly like the flattened pages I’ve put as placeholders right now on the site. I have all the individual elements and layers and psds, what I really want to know is how do I make the side navigation look like and work like it looks? I’ve been able to make it a side nav-bar in another project, and make the pink stripes the background, but placing the links and the little pictures has been a real pain. Any ideas from anyone? It also needs to expand and contract to fit whatever resolution the user is using.

Thank you in advance for your help!


Here is my site Read-Only:
(how to share your site Read-Only link)

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;

  1. 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)
  2. Your home button in the top right presents a different alignment challenge, but can probably be worked out.
  3. 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.

1 Like

Unfortunately I literally need to make the site look exactly as presented, as per the client’s instruction. I did try making a few suggestions, including a couple that you made, but they are firm. If only we were back in the day of Netscape and image maps and I’d be done already!

I do have all the foreground art as PNGs separately so that’s not a problem. I would much prefer to use webflow’s Nav for the reasons you suggested. I also am planning on making the little black ‘jamface’ picture on the top left a second functioning home button.

I will be eventually making every element separate (and do have all of them as transparent PNG files), exported from the original PSD layers). How do I make a CSS grid in webflow? I’m a little green on the current iteration of CSS, which is one of the reasons I’m using Webflow.

Thank you for all your help so far.

Yeah… modern web design is a very, very different thing from print design. I’m keen to hear what other designers think.

There’s nothing to keep you from using image maps,

… but your client needs to understand what they’re demanding …