BuddyPress.org

Hi @mikee1001,

The code i used for inserting the bubble counters for notifications, unread messages and total friends is:

// Notification counter bubble
function bptest_main_nav_notification_bubble( $items, $args ) {
    if( $args->theme_location == 'header-menu' ) { // In manage locations via WP Dash>Appearance>Menus
    	$items_array = array();
        while ( false !== ( $item_pos = strpos ( $items, '<li', 3 ) ) ) {
            $items_array[] = substr( $items, 0, $item_pos );
            $items = substr( $items, $item_pos );
        }
        $items_array[] = $items;
        array_splice( $items_array, 3, 0, '<li class="bubble">' . bp_notifications_get_unread_notification_count( bp_loggedin_user_id() ) . '</li>' ); // 0,0 1st position, 1,0 2nd, etc
        $items = implode( '', $items_array );
    }
    return $items;
}
add_filter( 'wp_nav_menu_items', 'bptest_main_nav_notification_bubble', 10, 2 );

// Unread message counter bubble 
function bptest_main_nav_message_bubble( $items, $args ) {
    if( $args->theme_location == 'header-menu' ) { // In manage locations via WP Dash>Appearance>Menus
        $items_array = array();
        while ( false !== ( $item_pos = strpos ( $items, '<li', 3 ) ) ) {
            $items_array[] = substr( $items, 0, $item_pos );
            $items = substr( $items, $item_pos );
        }
        $items_array[] = $items;
        array_splice( $items_array, 5, 0, '<li class="bubble">' . bp_get_total_unread_messages_count( bp_loggedin_user_id() ) . '</li>' ); // 0,0 1st position, 1,0 2nd, etc
        $items = implode( '', $items_array );
    }
    return $items;
}
add_filter( 'wp_nav_menu_items', 'bptest_main_nav_message_bubble', 10, 2 );

// Total friends counter bubble
// Note, 'bp_friend_get_total_requests_count' will give the total connection request count if desired
function bptest_main_nav_friend_bubble( $items, $args ) {
    if( $args->theme_location == 'header-menu' ) { // In manage locations via WP Dash>Appearance>Menus
        $items_array = array();
        while ( false !== ( $item_pos = strpos ( $items, '<li', 3 ) ) ) {
            $items_array[] = substr( $items, 0, $item_pos );
            $items = substr( $items, $item_pos );
        }
        $items_array[] = $items;
		array_splice( $items_array, 7, 0, '<li class="bubble">' . friends_get_total_friend_count( bp_loggedin_user_id() ) . '</li>' ); // 0,0 1st position, 1,0 2nd, etc
        $items = implode( '', $items_array );
    }
    return $items;
}
add_filter( 'wp_nav_menu_items', 'bptest_main_nav_friend_bubble', 10, 2 );

In each of the above you will want to change the theme_location == 'header-menu' to theme_location == 'INSERT YOUR HEADER MENU NAME HERE'. The name of your menu is found via your WP Dashboard > Appearance > Menus. The three functions above were inserted into bp-custom.php .

The positions of the bubbles will also need changing depending on where they should be in your menu. Do that by changing the numbers on the section array_splice( $items_array, 7, 0, '<li class="bubble">'. The comment alongside the line in the code should help you.

You’ll also need some CSS for the bubbles otherwise you probably won’t see them even if they are functioning. If you hit ctrl-A to select everything on your web page, they should show up somewhere in your menu (assuming the code has been implemented correctly of course).

As you can see in the functions above all the bubbles have been given a class called “bubble”. So put in your style.css (of your child theme) something like:

#main-navigation .main-nav ul li.bubble {
	transform: translate(0, 50%);
	width: 20px;
	height: 20px;	
	padding: 2px 6px; 
	border: 1px solid #000;
	border-radius: 50%;
	margin: 0 10px 0 0;
	background: #fff;
	color: #000;
	font-size: 11px;	
}

The selector (#main-navigation .main-nav ul li.bubble) may be different on your site because it will depend on your theme etc. So use the developer tools, F12 button, on your browser to find out the correct one. It will be the bit before the .bubble that is different.

Hopefully the above helps!