Buddypress - Display notification and profile in Header (instead of WP-admin bar)

Question

Is there a way to move the Buddypress "buddybar" from the admin bar into the navigation header of my theme. I want to use the "buddybar" menu and drop downs exactly as they are without being forced to use the admin bar.

I have been unable to find any documentation or forum discussions on this. Is there a starting function that can be called, that will load the "buddybar" elsewhere in my theme.

Answer 1

All you need is one piece of code to output most of what you need.

<?php bp_nav_menu(); ?>

Below is the the html and css is used to create the dropdown.

HTML

<ul class="dropdown-menu">
   <li>
      <ul id="drop-down-user-actions" class="ab-submenu hover">
          <li id="drop-down-user-info"><a class="ab-item" href="<?php echo home_url() ?>/members/<?php echo $current_user->user_login ?>/profile/"><?php echo get_avatar( $current_user->ID, '65' );?></a></li>
          <li id="drop-down-user-profile"><a class="ab-item" href="<?php echo home_url() ?>/members/<?php echo $current_user->user_login ?>/profile/"><?php echo $current_user->display_name ?></a></li>
          <li id="drop-down-edit-profile"><a class="ab-item" href="<?php echo $link; ?>"><?php _e('Edit Profile','cactusthemes') ?></a></li>
          <li id="drop-down-logout"><a class="ab-item" href="<?php echo wp_logout_url( get_permalink() ); ?>"><?php _e('Logout','cactusthemes') ?></a></li>
      </ul>
   </li>
   <?php bp_nav_menu(); ?>                                      
</ul>

CSS

#drop-down-user-info img {
position: relative;
width: 64px;
height: 64px;
float:left;
padding:0;
margin:0;
}
#drop-down-user-profile, #drop-down-edit-profile, #drop-down-logout {
margin-left: 80px;
}
#drop-down-user-profile {
color:#FFF;
}
#drop-down-user-profile > a {
text-transform: capitalize;
}
#menu-bp, #drop-down-user-actions {
padding: 6px 0;
background:#4c4c4d;
min-width: 264px;
font-family: 'Open Sans', sans-serif;
font-size: 13px;
font-weight: 300;
color:#C5C5C5
}
#drop-down-user-actions { 
background:#26292c;
padding: 20px;
}
#menu-bp > li {
background:#4c4c4d;
}    
#menu-bp > li > a, #menu-bp > li > ul > li > a {
padding-right: 1em;
padding-left: 1em;
line-height: 26px;
height: 26px;
white-space: nowrap;
min-width: 140px;
display: block;
}
#menu-bp > li.menu-parent:hover, #menu-bp > li.menu-parent > a:hover, #menu-bp .sub-menu li a:hover {
color: #e14d43;
}
#menu-bp .sub-menu li a {
color: #C5C5C5!important;
}
#menu-bp .sub-menu li a:hover {
color: #e14d43!important;
}
#menu-bp .menu-parent>a:before {
color: inherit!important;
position: relative!important;
font-size: 14px!important;
font-family: FontAwesome!important;
-webkit-font-smoothing: antialiased!important;
right: 5px!important;
top:0px!important;
content: "\f0d9"!important;
}
#menu-bp .menu-parent .sub-menu li > a:before, .dropdown-menu #drop-down-user-actions li > a:before {
content:none!important;
}
#menu-bp > li > ul {
display: none;
margin-left: 0;
left: inherit;
right: 100%;
padding:6px 10px;
margin-top:-32px;
position: absolute;
background:#4c4c4d;
}
#menu-bp .menu-parent:hover > .sub-menu {
display: block;
transition: all .1s ease;
}
#menu-bp > li > ul > li a {
padding:0;
}
#menu-bp li > a > span {
display:none;
}
#menu-bp > li > a {
pointer-events: none;
cursor: default;
}  

This should give you a near exact copy of the buddybar but without the admin bar itself