Notification Counter Positioning in Main Navigation Menu

  • Resolved @mcuk

    (@mcuk)


    9 years, 11 months ago

    Hi all,

    I am trying to insert a notification counter bubble within my main navigation menu after one specific ‘menu item li id’. Using the code below I have managed to display the counter correctly on the page but am unable to work out how to place it where I want after the desired menu item. Can anyone offer any pointers?

    I already have the code to display the notification counter bubble:

    echo bp_notifications_get_unread_notification_count( bp_loggedin_user_id() );

    I then added it to my theme’s child header.php within the main menu container div and gave it it’s own div & id to enable styling:

    <div id="testid"><?php echo bp_notifications_get_unread_notification_count( bp_loggedin_user_id() ); ?></div>

    I’ve also got the CSS which makes it appear correctly:

    #testid {
	background: #eee;
	border-radius: 50%;
	border: 1px solid #ccc;
	color: #000;
	display: inline;
	font-size: 70%;
	margin-left: 2px;
	padding: 3px 6px;
	text-align: center;
	vertical-align: middle;
}

    Thanks

Viewing 2 replies - 1 through 2 (of 2 total)

  • Please include a link to your site, so we can see what’s happening. Also please tell us more exactly where you want the bubble to appear.

    Thread Starter @mcuk

    (@mcuk)

    Managed to solve this:

    function bp_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', 'bp_main_nav_notification_bubble', 10, 2 );
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Notification Counter Positioning in Main Navigation Menu’ is closed to new replies.