[Resolved] Position Notification Counter Bubble after Specific Navigation Tab ID
-
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
-
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?
And also, did anyone get a solution to hiding the bubble if the number is 0?
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' );
Hi @mcuk
The bubble works well, thank you very much!
Here is a screenshotAs 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!
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??
Also, I would like a bubble for the “site-wide activity” page as well!! Anyone?
Try:
add_action( 'wp_head', 'hide_bubble_logged_out' );
https://codex.wordpress.org/Plugin_API/Action_Reference/wp_head
Works! Thanks!
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…
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.
8,0 ?
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?
First, you have a typo error in your function:
array_splice
should bearray_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:
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!
Do not work for me (>_<)
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
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 (: 🙂 (:
MikeFellow 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 🙂
- You must be logged in to reply to this topic.