Media Query Reversing Order of Horizontal Navigation

[Cathyk]

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?

[CrocoDillon]

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

[Cathyk]

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;

[Cathyk]

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

[Author]

Posts