Horizontal navigation can't align to right
17,039
Is this what you were trying to do?
Relevent changed code:
.nav-bar > li {
border:1px solid #333;
display:block;
float: right;
line-height:38px;
margin:0;
padding:0;
position:relative;
}
Also, if you are looking to have the order remain the same, just reverse the order of the list in HTML.
Comments
-
gstricklind almost 2 years
I know this has been discussed here before - as I've read through a lot of questions about the same thing. And have tried the solutions, but I just can't seem to make this stupid nav right align (needing li blocks to align to the right). Can someone please point out my mistake - thank you.
http://jsfiddle.net/gstricklind/vP38J/4/
CSS
ul#menu-main-top { float: right; } .nav-bar > li { border: 1px solid #333; display: block; float: left; line-height: 38px; margin: 0; padding: 0; position: relative; } ul#menu-main-top li a { color: #222222 !important; } .top-nav > li > a { color: #E6E6E6 !important; } .nav-bar > li > a:first-child { margin: 0 0 0 10px; padding: 0 0 0 30px; } .nav-bar > li > a:first-child { display: block; font-size: 14px; padding: 0 20px; position: relative; text-decoration: initial; }
HTML
<div class="eight columns"> <ul id="menu-main-top" class="top-nav nav-bar hide-for-small"> <li id="menu-item-58"> <a href="#">Home</a> </li> <li id="menu-item-94"> <a href="#">Calendar</a> </li> <li id="menu-item-59"> <a href="#">Meanings</a> </li> <li id="menu-item-77"> <a href="#">About Us</a> </li> <li id="menu-item-67"> <a href="#">Contact Us</a> </li> <li id="menu-item-343" class="active"> <a href="#">My Account</a> </li> <li class="logout"> <a href="#">Logout</a> </li> </ul> </div>