I am currently implementing a jquery navigation system which can be found at this link: http://css-tricks.com/5582-jquery-magicline-navigation/
My goal is to have the navigation bar float to the right without changing the order of items (e.g. home, contact should remain as contact, home). However, my attempts at achieving this resulted in some unexpected outcomes as seen in the screenshot I have shared below:
The original code snippet is as follows:
#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
}
In the HTML structure, the UL is enclosed within a div with the class "nav-wrap". The UL has the class "group" and an id of "navstyle". The current page, "home", is represented by the li class "current_page_item".
Below is the modified code snippet in an attempt to align the navigation to the 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
}
If anyone has any insights on where I might be going wrong or suggestions for improvement, I would greatly appreciate it! :)