# October 3, 2012 at 8:14 am
I’m trying to create a responsive navigation which displays a logo image in the middle. So on a desktop or tablet it will be as below:
LINK LINK LOGO IMAGE LINK LINK
But on a mobile device I want the logo image to display above the navigation and the link stacked below.
If anyone has any suggestions on how to do this please share!
:)# October 3, 2012 at 9:18 am
It’s not the most perfect solution, but you might want to try this: http://jsfiddle.net/senff/Ew4db/1/
Basically, there are two logos in the markup (one before the links, and one in the middle).
On desktop, the logo before the links is not shown (only the one in the middle), and all other elements are floating left.
On mobile, the logo in the middle is not shown (only the one before the links), and all elements are not lined up but stacked.
Not sure why it’s not responding to screen size changes on jsFiddle, but if you look at the code you’ll see what I’m trying to do.
You must be logged in to reply to this topic.