Grow your CSS skills. Land your dream job.

Media Query Reversing Order of Horizontal Navigation

  • # April 30, 2013 at 1:03 am

    I’m creating a media query for a website that has a horizontal navigation. I’ve been able to set up the navigation vertically but the order of the navigation is switched, i.e. horizontal order is Home, About, Contact and on the vertical its’ Contact, About, Home. Any suggestions?

    # April 30, 2013 at 3:57 am

    Code examples? It is likely to do less with the media query itself and more to do with your implementations of the various states.

    # April 30, 2013 at 4:16 am

    I’d put my money on right floated nav items, which would need the markup to be reversed (probably better to left float the nav items and only right float the whole nav).

    # April 30, 2013 at 4:46 am

    @crocodillon Not taking that bet, since that seems very likely =)

    # April 30, 2013 at 10:34 pm

    I tried posting this earlier today and see that it didn’t show for some reason. I tried CrocoDillon’s suggestion and it didn’t work. Here’s my code:

    CSS for desktop:

    #container #cssmenu {
    list-style-type:none;
    position:absolute;
    display:block;
    height:36px;
    font-size:12px;
    font-weight:bold;
    text-transform:lowercase;
    font-family:’Trebuchet MS’,Helvetica,Arial,Verdana,sans-serif;
    top: 78px;
    background-color: transparent;
    background-repeat: repeat-x;
    background-position: left top;
    left: 175px;
    width: 65%;
    margin-right: 5%;
    }
    #container #cssmenu li {
    display:block;
    float:right;
    padding:0;
    position: relative;
    left: 0px;
    margin: 0;
    padding: 0;
    }
    #container #cssmenu li a {
    display:block;
    color:#999999;
    text-decoration:none;
    font-weight:bold;
    padding:12px 20px 0 20px;
    height:24px;
    }
    #container #cssmenu li a:hover {
    color:#fdc10e;
    background-color: transparent;
    background-image: url(../images/over.jpg);
    background-repeat: no-repeat;
    background-position: right top;

    And @ media query css:

    #container #cssmenu {
    float: right;
    margin: 0 0 10 px;
    left: 5px;
    position: relative;
    top: 10px;
    width: 100%;
    }
    #container #cssmenu li {
    float: left;
    margin-bottom: 3px;
    display: block;
    background: #efefef;
    width: 100%;
    }
    #container #cssmenu li a {
    padding: 10px;
    text-align: center;
    display: block;
    }
    #container #cssmenu li a:hover {
    padding: 10px;
    text-align: center;
    background: none;
    text-decoration: underline;
    color: #E00;

    # April 30, 2013 at 11:15 pm

    Apologies for the spastic posts, but I’ve just tried CrocoDillon’s suggestion again and it works!

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

You must be logged in to reply to this topic.

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