Skip to:
Content
Pages
Categories
Search
Top
Bottom

[Resolved] Position Notification Counter Bubble after Specific Navigation Tab ID

  • @mcuk

    Participant

    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:

    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>

    (Putting it here was just a test to see if the echo and CSS were correct).

    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;
    }

    I ran a search for ‘notification counter’ along with a few other things but didn’t come across a recognisable solution.

    Thanks

Viewing 18 replies - 26 through 43 (of 43 total)
  • @aminipix

    Participant

    Great! Thanks alot! You made it work for me now. I definately would like the bubble to not show for user logged out. Can I use the following code:

        if (!is_user_logged_in())
            return $menu;
        else
            $notif = '
    

    Where does it go in?

    @aminipix

    Participant

    And also, did anyone get a solution to hiding the bubble if the number is 0?

    @mcuk

    Participant

    This might work to hide it for logged out users (put in bp-custom.php):

    function hide_bubble_logged_out () {
    	if ( !is_user_logged_in() ) {
    		?><style type="text/css">.bubble { display: none; }</style><?php
    	}		
    }	
    add_action( 'bp_ready', 'hide_bubble_logged_out' );

    @georgio-1

    Participant

    Hi @mcuk
    The bubble works well, thank you very much!
    Here is a screenshot

    As you see, I put the notification link (Appearance>Menus) on the menubar and I added the bubble with negative left margin (-5 px) for the two elements to be near each other. So if a user has a notification, they can click the notification link (notif) directly to see it.

    Thanks again!

    @aminipix

    Participant

    Everything works now! Thanks a lot @mcUK !

    However, after adding the function hide bubble, I get this message in Edge and Explorer:

    Warning: Cannot modify header information – headers already sent by (output started at /home/watchlis/public_html/wp-content/plugins/bp-custom.php:41) in /home/watchlis/public_html/wp-includes/pluggable.php on line 1171

    Google chrome runs it the way I want! What can be the cause??

    @aminipix

    Participant

    Also, I would like a bubble for the “site-wide activity” page as well!! Anyone?

    @shanebp

    Moderator

    Try:
    add_action( 'wp_head', 'hide_bubble_logged_out' );

    https://codex.wordpress.org/Plugin_API/Action_Reference/wp_head

    @aminipix

    Participant

    Works! Thanks!

    @aminipix

    Participant

    Hi again guys!

    Is it possible to get a bubble for the activity stream as well?? I guess the coding would be a bit different though… So that it shows a notification whenever there is something new in all activity…

    @mikee1001

    Participant

    How do you position the notification counter for dropdown items? For example,

    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

    if there was a dropdown menu below this menu item (below position 7,0), what would the position be labelled as? I’ve tried 7,1 but no luck.

    @danbp

    Participant

    8,0 ?

    @mikee1001

    Participant

    Thanks @danbp, I tried that, but it places the number immediately following the number at 7,0 which is on the top line of the menu, instead of being next to the submenu item below 7,0 … so it seems like it ignores the sub menu?

    @danbp

    Participant

    First, you have a typo error in your function: array_splice should be array_slice

    Second: the sort order belongs to the parent item. The secondary (aka sub nav) is fixed by CSS.

    If parent as 3 as order, the child has also 3, but to place it correctly, you have to adjust the css.

    See here:

    wp_nav_menu()

    @angeljs

    Participant

    Can you explain what this means, please, I’m not a programmer and am having problems using this code:

    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.

    Thanks!

    @livingflame

    Participant

    Do not work for me (>_<)

    @dekoningalex

    Participant

    Hi i really want to do this too, but i am new to Php.

    This is all the code in my header.php

    <!doctype html>
    <html <?php language_attributes(); ?>>
    <head>
    	<meta charset="<?php bloginfo( 'charset' ); ?>" />
    	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    	<link rel="profile" href="http://gmpg.org/xfn/11">
    	<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
    	<?php wp_site_icon(); ?>
    	<?php 
    		$id = get_queried_object_id();
    		$page_scroll = (get_post_meta($id, 'page_scroll', true) == 'on' ? 'page_scroll' : '');
    		$snap_scroll = (get_post_meta($id, 'snap_scroll', true) == 'on' ? 'snap_scroll' : '');
    		$rev_slider_alias = get_post_meta($id, 'rev_slider_alias', true);
    		$smooth_scroll = (ot_get_option('smooth_scroll') != 'off' ? 'smooth_scroll' : '');
    		$header_style = (get_post_meta($id, 'header_style', true) ? get_post_meta($id, 'header_style', true) : ot_get_option('header_style', 'style1'));
    	?>
    	<?php
    		$class = array();
    	 	array_push($class, $page_scroll);
    	 	if(!empty($snap_scroll)) { 
    	 		array_push($class, 'snap');
    	 	}
    		array_push($class, $smooth_scroll);
    	?>
    	<?php 
    		/* Always have wp_head() just before the closing </head>
    		 * tag of your theme, or you will break many plugins, which
    		 * generally use this hook to add elements to <head> such
    		 * as styles, scripts, and meta tags.
    		 */
    		wp_head(); 
    	?>
    </head>
    <body <?php body_class($class); ?> data-themeurl="<?php echo THB_THEME_ROOT; ?>">
    <div id="wrapper" class="open">
    	
    	<!-- Start Mobile Menu -->
    	<?php do_action( 'thb_mobile_menu' ); ?>
    	<!-- End Mobile Menu -->
    	
    	<!-- Start Quick Cart -->
    	<?php do_action( 'thb_side_cart' ); ?>
    	<!-- End Quick Cart -->
    	
    	<!-- Start Content Container -->
    	<section id="content-container">
    		<!-- Start Content Click Capture -->
    		<div class="click-capture"></div>
    		<!-- End Content Click Capture -->
    		<?php 
    			if (thb_accountpage_notloggedin()) {
    				get_template_part( 'inc/header/subheader' );
    				get_template_part( 'inc/header/'.$header_style );
    			}
    		?>
    		<?php if (is_page() && $rev_slider_alias) {?>
    			<?php $rev_slider_white = get_post_meta($id, 'rev_slider_white', true); ?>
    			<div id="home-slider" class="<?php echo esc_attr($rev_slider_white); ?>">
    				<?php if (function_exists('putRevSlider')) { putRevSlider($rev_slider_alias); } else { _e('Please Install & Activate Revolution Slider', 'bronx'); }?>
    			</div>
    		<?php  } ?>
    		
    		<div role="main" class="<?php echo esc_attr($snap_scroll); ?>">
    			<?php if(!empty($snap_scroll)) { ?><div class="ai-dotted ai-indicator"><span class="ai-inner1"></span><span class="ai-inner2"></span><span class="ai-inner3"></span></div><?php } ?>

    Where do i add the from your example in the code?

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

    I already added the css to the childs theme style.css and added the three php snippers for correctly placing the bubbles as well, this is the only part i don’t understand so far.

    Thanks

    @michaelbrown1

    Participant

    Hello,

    I have been trying to implement this solution for many, incredibly frustrating hours. I have studied this topic and its links for a few days now, hoping to solve the problem on my own.

    I can successfully show a fixed ‘notification counter’ in the menu using the first snippet that was provided, great! However when I try to use the second snippet for positioning the counter, the code seems to have no effect. It’s very possible I’m missing something basic, as it seems that many others on this topic/forum have had success adding notifications to their header menus.

    Please help me before I go insane (: 🙂 (:
    Mike

    @michaelbrown1

    Participant

    Fellow coders,

    I have been through the depths of despair and I emerge victorious. In the end, changing “return $menu” to “return $items” solved my problem. Hope this saves someone the three weeks it cost me 🙂

Viewing 18 replies - 26 through 43 (of 43 total)
  • You must be logged in to reply to this topic.
Skip to toolbar