Grow your CSS skills. Land your dream job.

Responsive Navigation.

  • # 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.

    LOGO IMAGE
    LINK
    LINK
    LINK
    LINK

    If anyone has any suggestions on how to do this please share!

    :)

    # October 3, 2012 at 8:18 am

    When you say stacked below do you mean…

    LOGO IMAGE

    LINK

    LINK

    LINK

    or

    LOGO IMAGE

    LINK LINK LINK

    ?

    # October 3, 2012 at 8:25 am

    When you say stacked below do you mean…

    LOGO IMAGE

    LINK

    LINK

    LINK

    # October 3, 2012 at 8:27 am

    Similar to the menu on the Forefathers Group website @ http://forefathersgroup.com/.

    # 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.

    # October 3, 2012 at 9:27 am

    Thanks for the response I will take a look. I’m trying to make it make it as simple as I can.

    :)

    # October 3, 2012 at 9:51 am

    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.

    # October 3, 2012 at 4:51 pm

    Hey Paulie,

    How can I find the media queries using Firebug /Web Inspector. Got the markup & CSS relating to it.

    # October 3, 2012 at 5:11 pm

    Just switched to Chrome and can now find them.

    :)

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".