Use this CSS:
/*Change LOGIN menu item position*/
@media (min-width: 980px){
.nav-collapse .nav {
width: 100%;
}
li#menu-item-1284 {
float: right;
padding-right: 10%;
}
}
/*Change REGISTER menu item position*/
@media (min-width: 980px){
.nav-collapse .nav {
width: 100%;
}
li#menu-item-1782 {
float: right;
padding-left: 25%;
}
}
/*Change Logout menu item position*/
@media (min-width: 980px){
.nav-collapse .nav {
width: 100%;
}
li#menu-item-1503 {
float: right;
padding-right: 10%;
}
}
Change “menu-item-#” to your own. You may need to adjust padding % to make them how you like.
Here is an example of how it looks: EXAMPLE. Use promo code MERCHANT for a test account.
Get “nav menu roles” plugin to hide Register|Login for logged-in users.