Can Wayfinder by used to create a menu that has a logo horizontally centered with nav buttons left and right of the logo?

I am attempting to recreate a flash site navigation menu in MODx using a responsive framework (Foundation 3).
The site and menu will only have 4 main navigation buttons. 2 on each side of a logo. I found a site called http://www.warface.co.uk/ that is pretty close to what I am trying to achieve. It looks like they use 2 lists for the menu on large device display, and then combine the navigation into one list in a class that displays for mobile.

I don't anticipate the need for drop menus. Any sub page info that gets developed could be accesses via a secondary navigation in a sidebar.

Question: Is it possible to do this with wayfinder? button | button | LOGO | button | button

If I tell wayfinder to put a page in the menu, how can I tell it which list to go into. Can I do this by assigning a class to each nav item.

Am I making things more complicated than they need to be?

Yes, you can assign a unique ID to each item with Wayfinder. Just put the "home" page in the middle of your resources for the menu listing...

About
Portfolio
Warface
Blog
Contact

Then use something like

Then in your CSS you can style #item3 as you like, giving it the background image of the logo, either using the link text as the logo text or shifting it out of view.

And you'd still be able to have drop-down submenus if you wanted to.

Thanks for the feedback. The unique id suggestion is great. In terms of the logo being part of the list though, I'm not sure that works. Since the site will be responsive, then on iPHone, I'd want the logo be on top of the menu, and the navigation below. Warface wraps their logo in an h1 tag with a specific class, which I think allows it to be pulled out of the rotation.

I would hide the home page from the nav menu. Then I just need to figure out the setup for getting MODx to put two of my buttons with unique IDs in the left hand list, and the other two in the right hand list.

I'm experiment with this in the morning with a fresher brain.

You could configure Wayfinder to use different elements, divs for example, then you would be able to position any of the divs in any way you wanted. It's all in the tpls and the css.

Only one thing to do: Jump in and start coding and experimenting. I think I will follow the approach in warface with the <div="menu"><ul></ul> <h1>image</h1> <<ul></ul> <</div>.
Each list item has a class applied to it, so perhaps I can use that class as a target for Wayfinder? But, when you say I can use a unique ID, I'm assuming you mean an element ID and not a div ID.
I'll be working on this at various points today. Will post back my results.

Quite the same question was discussed in this thread.

Thank you. Thank you. Thank you. I will give this a go right away.

That works, but it won't help you get it positioned at the top in mobile styles.

I know. I'm torn between having the menu display at the top on mobile or just a single line of buttons as done on Warface. Warface uses an alternate class for the display on mobile, so I would think that I could write a separate wayfinder call to target that class. Of course, I know enough to be dangerous.

You don't have to use unordered lists. You can have a set of divs, and position the middle (home page/logo) div absolutely when you want to move it out of the regular menu structure.