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

Answer 2

Thanks to the inspiration from the previous answer I came up with this, which also includes the notification bit.

<?php
    if (is_user_logged_in()) {

        ?>
        <nav class="bp-nav" role="navigation">
            <ul id="bp-nav-menu">
                <li id="bp-nav-menu-notifications" class="menupop">
                    <a class="bp-nav-menu-item" aria-haspopup="true" href="<?php echo $menu_link; ?>">
                        <?php echo $menu_title; ?>
                    </a>
                    <div class="bp-nav-menu-sub-wrapper">
                        <ul id="bp-nav-menu-notifications-default" class="bp-nav-menu-submenu">
                            <?php
                                $notifications = bp_notifications_get_notifications_for_user( bp_loggedin_user_id(), 'object' );
                                $count         = ! empty( $notifications ) ? count( $notifications ) : 0;
                                $alert_class   = (int) $count > 0 ? 'pending-count alert' : 'count no-alert';
                                $menu_title    = '<span id="ab-pending-notifications" class="' . $alert_class . '">' . number_format_i18n( $count ) . '</span>';
                                $menu_link     = trailingslashit( bp_loggedin_user_domain() . bp_get_notifications_slug() );
                                if ( ! empty( $notifications ) ) {
                                    foreach ( (array) $notifications as $notification ) {
                                        ?>
                                        <li id="bp-nav-menu-notification-<?php echo $notification->id; ?>">
                                            <a class="bp-nav-menu-item" href="<?php echo $notification->href; ?>">
                                                <?php echo $notification->content; ?>
                                            </a>
                                        </li>
                                        <?php
                                    }
                                } else {
                                    ?>
                                    <li id="bp-nav-menu-no-notifications">
                                        <a class="bp-nav-menu-item" href="<?php echo $menu_link; ?>">
                                            <?php echo __( 'No new notifications', 'buddypress' ); ?>
                                        </a>
                                    </li>
                                    <?php
                                }
                            ?>
                        </ul>
                    </div>
                </li>
                <li id="bp-nav-menu-my-account" class="menupop with-avatar">
                    <a class="bp-nav-menu-item" aria-haspopup="true" href="<?php echo bp_loggedin_user_domain(); ?>/profile/edit/">
                        <?php bp_loggedin_user_fullname(); ?><?php bp_loggedin_user_avatar( 'type=thumb&width=28&height=28' );?>
                    </a>

                    <div class="bp-nav-menu-sub-wrapper">
                        <ul id="bp-nav-menu-user-actions" class="bp-nav-menu-submenu hover">
                            <li id="bp-nav-menu-user-info">
                                <a class="bp-nav-menu-item" href="<?php echo bp_loggedin_user_domain(); ?>">
                                    <?php bp_loggedin_user_avatar( 'type=thumb&width=64&height=64' );?>
                                </a>
                            </li>
                            <li id="bp-nav-menu-user-profile">
                                <a class="bp-nav-menu-item" href="<?php echo bp_loggedin_user_domain(); ?>/profile/edit">
                                    <?php bp_loggedin_user_fullname(); ?>
                                </a>
                            </li>
                            <li id="bp-nav-menu-edit-profile">
                                <a class="bp-nav-menu-item" href="<?php echo bp_loggedin_user_domain(); ?>/profile/edit">
                                    <?php _e('Edit My Profile', 'buddypress') ?>
                                </a>
                            </li>
                            <li id="logout">
                                <a class="bp-nav-menu-item" href="<?php echo wp_logout_url( get_permalink() ); ?>">
                                    <?php _e('Log Out', 'buddypress') ?>
                                </a>
                            </li>
                        </ul>
                        <?php bp_nav_menu(); ?>
                    </div>
                </li>
            </ul>
        </nav>

        <?php
    }
?>

The only thing is, I am moving the first <li> out into a functions.php func, because then I'll be able to check it for updates via ajax.

Here's some basic CSS to get started. You probably aren't going to want it to look like the admin bar so no need to try to duplicate that:

#bp-nav-menu > li {
  display: inline-block;
}
#bp-nav-menu > li.menupop {
  position: relative;
}
#bp-nav-menu > li.menupop .bp-nav-menu-sub-wrapper {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 3;
  background: #ccc;
  min-width: 200px;
}
#bp-nav-menu > li.menupop:hover .bp-nav-menu-sub-wrapper {
  display: block;
}
#bp-nav-menu #bp-nav-menu-notifications > a {
  padding: 0 0.5em;
}
#bp-nav-menu #bp-nav-menu-notifications > a span {
  background: #ddd;
  color: #333;
  padding: 2px 5px;
  border-radius: 4px;
}
#bp-nav-menu #bp-nav-menu-user-actions {
  list-style: none;
  overflow: hidden;
  width: 250px;
}
#bp-nav-menu #bp-nav-menu-user-actions > li {
  float: left;
  clear: right;
}
#bp-nav-menu #bp-nav-menu-user-actions > li#bp-nav-menu-user-info {
  clear: none;
}
#bp-nav-menu #menu-bp {
  background: #aaa;
  list-style: none;
  padding: 0;
}
#bp-nav-menu #menu-bp .no-count {
  display: none;
}
#bp-nav-menu #menu-bp .menu-parent {
  position: relative;
}
#bp-nav-menu #menu-bp .menu-parent:before {
  content: "\f141";
  font-family: Dashicons;
}
#bp-nav-menu #menu-bp .menu-parent .sub-menu {
  display: none;
  position: absolute;
  left: -200px;
  top: 0;
  width: 200px;
  background: #999;
  list-style: none;
}
#bp-nav-menu #menu-bp .menu-parent:hover .sub-menu {
  display: block;
}

If you happen to prefer LESS like me:

#bp-nav-menu {

    > li {
        display: inline-block;

        &.menupop {
            position: relative;

            .bp-nav-menu-sub-wrapper {
                display: none;
                position: absolute;
                top: 100%;
                right: 0;
                z-index: 3;
                background: #ccc;
                min-width: 200px;
            }

            &:hover {
                .bp-nav-menu-sub-wrapper {
                    display: block;
                }
            }
        }
    }

    #bp-nav-menu-notifications {
        > a {
            padding: 0 0.5em;
            span {
                background: #ddd;
                color: #333;
                padding: 2px 5px;
                border-radius: 4px;
            }
        }
    }

    #bp-nav-menu-user-actions {
        list-style: none;
        overflow: hidden;
        width: 250px;

        > li {
            float: left;
            clear: right;
            &#bp-nav-menu-user-info {
                clear: none;
            }
        }
    }

    #menu-bp {
        background: #aaa;
        list-style: none;
        padding: 0;

        .no-count {
            display: none;
        }

        .menu-parent {
            position: relative;
            &:before {
                content: "\f141";
                font-family: Dashicons;
            }
            .sub-menu {
                display: none;
                position: absolute;
                left: -200px;
                top: 0;
                width: 200px;
                background: #999;
                list-style: none;

                > li {
                }
            }
            &:hover .sub-menu {
                display: block;
            }
        }

    }

}