Responsive menu with a logo centered between the menu items

[mk0r]

I’m trying to code the following responsive navigation menu design:

http://cl.ly/image/2y3N3T253v1d

It’s beyond my level of proficiency right now, there are no off-the shelf plugins I can find to use as a template.

I imagine there are 3 paths to take:

1. Logo is an a>img in a li in the unordered list as the 3rd of 5 items (desktop first)

2. Logo is the same but the first of the 5 items (mobile first)

In these options css/js would be used to position the menu items around each other based on media queries

1. Something like http://foundation.zurb.com/docs/components/interchange.html is used to swap out new markup for desktop vs mobile.

How would you approach this problem?

[mk0r]

I guess a 4th option would be to reorder the li’s using javascript.

Curious what anyone thinks would be the most elegant option

[David Hosanna]

OOT, I love your Drawing :>

[shuttertower]

I’m looking to build the same. Did you ever find a solution or could you point me in the right direction?

[Author]

Posts