Question

I am using this jquery navigation: http://css-tricks.com/5582-jquery-magicline-navigation/

I would like to have the navigation float to the right, without reordering ( eg. home, contact becomes contact, home). Unfortunately, I got some odd results when I tired myself – you can see in this screen capture I’ve uploaded:

http://postimage.org/image/1idig02pw/

Original code:

#navstyle {
list-style:none;
position:relative;
width:960px;
margin:0 auto
}

#navstyle li {
display:inline-block
}

#navstyle a {
color:#bbb;
font-size:14px;
float:left;
text-decoration:none;
text-transform:uppercase;
padding:6px 10px 4px
}

#navstyle a:hover {
color:#FFF
}

#magic-line {
position:absolute;
bottom:-2px;
left:0;
width:100px;
height:2px;
background:#fe4902
}

.current_page_item a {
color:#FFF!important
}

.ie6 #navstyle li,.ie7 #navstyle li {
display:inline
}

The HTML: UL is wrapped in div “nav-wrap”. UL class is “group” with id “navstyle”. Current page, home, has the li class “current_page_item”.

This is the code I’ve changed to make it float right:

.nav-wrap {
float:right;
width:100%;
font-size:1em;
margin-top:108px;
position:relative
}

#navstyle {
list-style:none;
float:right;
display:inline-block;
margin:0
}

#navstyle li {
display:inline-block
}

Any ideas of what I’m doing wrong? I’d really appreciate any help! 🙂

Answer 1

You can only float the list items left if you want to maintain the order. If you want the whole thing on the right, simply float the <ul>, right instead.