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.
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.
LOGO IMAGE LINK LINK LINK LINK
If anyone has any suggestions on how to do this please share!
:)
When you say stacked below do you mean...
LOGO IMAGE
LINK
LINK
LINK
or
LOGO IMAGE
LINK LINK LINK
?
When you say stacked below do you mean...
LOGO IMAGE
LINK
LINK
LINK
Similar to the menu on the Forefathers Group website @ http://forefathersgroup.com/.
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.
Thanks for the response I will take a look. I'm trying to make it make it as simple as I can.
:)
Firstly, why not inspect the Source markup of the example site and then examine the CSS relating to it?
Firebug /Web Inspector will allow you to do this. It ain't hard.
I looked at it and their method seemed quit elegant...and fairly logical/semantic too.
Hey Paulie,
How can I find the media queries using Firebug /Web Inspector. Got the markup & CSS relating to it.
Just switched to Chrome and can now find them.
:)