Replace the “float: left” on #userbar and #optionsbar with “float: none” change “width: 138px” to “witdh: 100%”.
On #userbar ul#bp-nav and #optionsbar ul#options-nav remove “width: 148px.
Add “float: left” on #userbar ul li and #optionsbar ul li
Note: This is without any styling and should just point you in the right direction.
Thanks for that I will give it a go and let you know how I get on!
There’re some old posts on the same topics, I believe. (only if 21cdb’s code doesn’t work) 
Hey,
Thanks again for the advice, I’m having still having some issues around this it is quite tricky, here is a picture of how it is rendering now.
http://i34.tinypic.com/wklono.jpg
Is there any release of the code used on this site, the way it’s styled on here looks great!
It’s also at http://yeahetc.com on the member pages at the moment, still playing about.
James
This buddypress.org design is ONLY for buddypress.org.
Some buddypress themes before 1.1 releases had horizontal menus. Maybe you should search and get some sample codes. Also check out gallery section, in case if our member already has done it on their site(s).
Check the themes of Milo.
http://3oneseven.com/wpmu-buddypress-themes/
Change those, those have the bar like you want it.
(You need an understanding of a bit more then css if you want it like your design right now though..)
Hi,
Check out http://ryuuko.cl
It uses a horizontal user bar at the top. Feel free to see the markup and the css (it displays in place of the login form).
Hey,
Thanks for all your help, hopefully if I can get all this code together and working I will post it as I’m sure people will come accross this, I’m not that great at CSS yet though!
Thanks for the link I like your site!
Hi again everyone, thanks for all your pointers. I eventually ended up spending all day yesterday writing it by myself which took a very long tme! Here is the code in case it might help anyone else, it might not be prefect, I also had to do some editing in the userbar.php file to make it format how I wanted.
/*** User Navigation Bar *****************************************************/
#userbar {
width: 970px;
background: #FFFFFF;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
text-decoration: none;
padding: 3px 5px 5px 5px;
margin-bottom:5px;
height: 33px;
}
#userbar a { text-decoration: none; }
#userbar ul li {
margin-right: 0;
list-style: none;
float:left;
}
#userbar h3 {
font: normal 1em "Arial", Times, serif;
text-align: left;
padding: 0px 0 0px 0;
}
#userbar p.avatar {
text-align: left !important;
float: left;
margin-right: 1px;
}
#userbar img.avatar {
margin: 0;
width: 30px;
height: 30px;
float: none;
}
#userbar p#login-text {
margin-top:7px;
float: left;
vertical-align: middle
}
#userbar p#stuff {
margin-top:7px;
padding: 10px;
float: right;
}
#userbar form input#userbar_rememberme { width: auto; }
#userbar form input#wp-submit { width: auto; }
#userbar ul#bp-nav {
z-index: 0;
}
#userbar ul#bp-nav li.current {
background-color:#DDDDDD;
}
#userbar ul#bp-nav li a {
font-size:small;
color: #555;
padding: 0.55em 3em 0.55em 0;
display: block;
text-align: right;
margin-right: 1px;
font-family: Arial !important;
letter-spacing:-1px;
margin-left: 17px;
}
#userbar ul#bp-nav li.current a {
font-size:small;
margin-left: 17px;
color: #D6007F;
font-weight:bold;
font-family: Arial !important;
letter-spacing:-1px;
}
li a#user-profile, li a#my-profile {
background: url(../images/profile_bullet.gif) 67% 52% no-repeat;
}
li a#user-messages, li a#my-messages {
background: url(../images/messages_bullet.gif) 85% 52% no-repeat;
}
li a#user-blogs, li a#my-blogs {
background: url(../images/blog_bullet.gif) 64% 52% no-repeat;
}
li a#user-friends, li a#my-friends {
background: url(../images/friends_bullet.gif) 68% 52% no-repeat;
}
li a#user-groups, li a#my-groups {
background: url(../images/groups_bullet.gif) 70% 52% no-repeat;
}
li a#user-wire, li a#my-wire {
background: url(../images/wire_bullet.gif) 70% 52% no-repeat;
}
li a#user-activity, li a#my-activity {
background: url(../images/activity_bullet.gif) 70% 52% no-repeat;
}
li a#user-settings, li a#my-settings {
background: url(../images/settings_bullet.gif) 70% 52% no-repeat;
}
li a#wp-logout {
background: url(../images/logout_bullet.gif) 70% 52% no-repeat;
}
li a#group-home, li a#group-wire, li a#group-photos, li a#group-forum,
li a#group-members, li a#group-invite, li a#group-leave, li a#group-admin
li a#request-membership, li a#group-admin {
background: url(../images/groups_bullet.gif) 70% 52% no-repeat;
}
li a#group-forum {
background: url(../images/forum_bullet.gif) 70% 52% no-repeat;
}
li a#group-members {
background: url(../images/friends_bullet.gif) 70% 52% no-repeat;
}
li a#group-invite {
background: url(../images/invite_bullet.gif) 70% 52% no-repeat;
}
li a#group-leave {
background: url(../images/cross_bullet.gif) 70% 52% no-repeat;
}
li a#group-wire {
background: url(../images/wire_bullet.gif) 70% 52% no-repeat;
}
li a#group-admin {
background: url(../images/blogadmin_icon.gif) 70% 52% no-repeat;
}
li a#request-membership {
background: url(../images/request_bullet.gif) 70% 25% no-repeat;
}
James
