Skip to:
Content
Pages
Categories
Search
Top
Bottom

Bubble Notifications Problem


  • danimasedo93
    Participant

    @danimasedo93

    Hi all! I’m new in php & css.

    After reading a lot and learning very little, I managed to program the notifications in my project in php and css. It works fine, shows the amounts (friends, messages and notifications) and redirects where it should.

    My problem is that I need to “hide” the bubble of “0” when the user has no notifications and only show when if they have 1 or more notifications

    Bubble Notification in menu

    Functions.php

    function my_counter_nav_menu($menu) {
    
    	if ( ! is_user_logged_in() ) {
    		return $menu;
    	}
    
    	$user_id = bp_loggedin_user_id();
    	$user_url = bp_loggedin_user_domain();
    
            $friends_url = $user_url . bp_get_friends_slug() . '/';
    	$msg_url = $user_url . bp_get_messages_slug() . '/';
    	$notify_url = $user_url . bp_get_notifications_slug() . '/';
    
    	ob_start();
    	?>
            <li><a><a href="<?php echo bp_loggedin_user_domain();?>friends"><span class="notifications_icons"><i class="fas fa-user-friends" style="font-size:17px;"></i></span><span class="my_bubble_notify"><?php echo friends_get_friend_count_for_user( $user_id );?></span></a></a></li>
    
    	<li><a><a href="<?php echo bp_loggedin_user_domain();?>messages"><span class="notifications_icons"><i class="fas fa-envelope" style="font-size:17px;"></i></span><span class="my_bubble_notify"><?php echo bp_get_total_unread_messages_count( $user_id );?></span></a></a></li>
    	
    	<li><a><a href="<?php echo bp_loggedin_user_domain();?>notifications"><span class="notifications_icons"><i class="fas fa-bell" style="font-size:17px;"></i></span><span class="my_bubble_notify"><?php echo bp_notifications_get_unread_notification_count( $user_id );?></span></a></a></li>
    <?php
    	$menu_items = ob_get_clean();
    
    	$menu = $menu . $menu_items;
    	return $menu;
    }
    
    add_filter( 'wp_nav_menu_items', 'my_counter_nav_menu' )

    CSS

    .notifications_icons {
    color: #ffffff;
    vertical-align: middle;
    margin: -7px;
    }
    
    .my_bubble_notify {
    color: #ffffff;
    border-radius: 3px;
    background-color: #f7823f;
    vertical-align: 20%;
    position: relative;
    	font-size: small;
    	padding: 0.1em 5px;
    }

    Buddypress 6.0.0
    Wordpress 5.4.2
    site: http://www.gamerstroop.com
    If you need, you can use test account (acc:test – pw:test)

    I dont know if I can paste my site link here. If I can’t please remove it or let me know, thank you so much for reading and helping me! <3

  • You must be logged in to reply to this topic.
Skip to toolbar