Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Responsive Navigation.

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #40132
    BibCra
    Participant

    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!

    :)

    #111215
    Paulie_D
    Member

    When you say stacked below do you mean…

    LOGO IMAGE

    LINK

    LINK

    LINK

    or

    LOGO IMAGE

    LINK LINK LINK

    ?

    #111216
    BibCra
    Participant

    When you say stacked below do you mean…

    LOGO IMAGE

    LINK

    LINK

    LINK

    #111217
    BibCra
    Participant

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

    #111219
    Senff
    Participant

    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.

    #111222
    BibCra
    Participant

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

    :)

    #111227
    Paulie_D
    Member

    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.

    #111251
    BibCra
    Participant

    Hey Paulie,

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

    #111253
    BibCra
    Participant

    Just switched to Chrome and can now find them.

    :)

Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘CSS’ is closed to new topics and replies.