4 files changed, 25 insertions, 8 deletions
diff --git a/phpBB/styles/prosilver/template/ajax.js b/phpBB/styles/prosilver/template/ajax.js
index aec6b0bbe6..3888d26785 100644
--- a/phpBB/styles/prosilver/template/ajax.js
+++ b/phpBB/styles/prosilver/template/ajax.js
@@ -132,9 +132,9 @@ phpbb.markNotifications = function($popup, unreadCount) {
 
 	// Update the unread count.
 	$('strong', '#notification_list_button').html(unreadCount);
-	// Remove the Mark all read link if there are no unread notifications.
+	// Remove the Mark all read link & notification count if there are no unread notifications.
 	if (!unreadCount) {
-		$('#mark_all_notifications').remove();
+		$('#mark_all_notifications, #notification_list_button > strong').remove();
 	}
 
 	// Update page title
diff --git a/phpBB/styles/prosilver/template/navbar_header.html b/phpBB/styles/prosilver/template/navbar_header.html
index 7925bd6362..ab6eb0805b 100644
--- a/phpBB/styles/prosilver/template/navbar_header.html
+++ b/phpBB/styles/prosilver/template/navbar_header.html
@@ -145,14 +145,14 @@
 		<!-- IF S_DISPLAY_PM -->
 			<li class="rightside" data-skip-responsive="true">
 				<a href="{U_PRIVATEMSGS}" role="menuitem">
-					<i class="icon fa-inbox fa-fw" aria-hidden="true"></i><span><span>{L_PRIVATE_MESSAGES} [</span><strong>{PRIVATE_MESSAGE_COUNT}</strong><span>]</span></span>
+					<i class="icon fa-inbox fa-fw" aria-hidden="true"></i><span><span>{L_PRIVATE_MESSAGES} <!-- IF PRIVATE_MESSAGE_COUNT --><strong class="badge">{PRIVATE_MESSAGE_COUNT}</strong><!-- ENDIF --></span>
 				</a>
 			</li>
 		<!-- ENDIF -->
 		<!-- IF S_NOTIFICATIONS_DISPLAY -->
 			<li class="dropdown-container dropdown-{S_CONTENT_FLOW_END} rightside" data-skip-responsive="true">
 				<a href="{U_VIEW_ALL_NOTIFICATIONS}" id="notification_list_button" class="dropdown-trigger">
-					<i class="icon fa-bell fa-fw" aria-hidden="true"></i><span><span>{L_NOTIFICATIONS} [</span><strong>{NOTIFICATIONS_COUNT}</strong><span>]</span></span>
+					<i class="icon fa-bell fa-fw" aria-hidden="true"></i><span><span>{L_NOTIFICATIONS} <!-- IF NOTIFICATIONS_COUNT --><strong class="badge">{NOTIFICATIONS_COUNT}</strong><!-- ENDIF --></span>
 				</a>
 				<!-- INCLUDE notification_dropdown.html -->
 			</li>
diff --git a/phpBB/styles/prosilver/theme/colours.css b/phpBB/styles/prosilver/theme/colours.css
index d76fd0852a..cf21ac216b 100644
--- a/phpBB/styles/prosilver/theme/colours.css
+++ b/phpBB/styles/prosilver/theme/colours.css
@@ -1168,3 +1168,8 @@ input.disabled {
 li.notification-reported strong, li.notification-disapproved strong {
 	color: #D31141;
 }
+
+.badge {
+	background-color: #D31141;
+	color: #ffffff;
+}
diff --git a/phpBB/styles/prosilver/theme/common.css b/phpBB/styles/prosilver/theme/common.css
index e800c63294..8368fc158c 100644
--- a/phpBB/styles/prosilver/theme/common.css
+++ b/phpBB/styles/prosilver/theme/common.css
@@ -1205,6 +1205,22 @@ ul.linklist:after,
 	margin-left: 58px;
 }
 
+.badge {
+	border-radius: 10px;
+	opacity: 0.8;
+	text-align: center;
+	white-space: nowrap;
+	font-size: 10px;
+	line-height: 1;
+	float: right;
+	display: inline-block;
+	margin-left: 3px;
+	vertical-align: baseline;
+	position: relative;
+	top: 3px;
+	padding: 4px 6px;
+}
+
 /* Navbar specific list items
 ----------------------------------------*/
 
@@ -1216,10 +1232,6 @@ ul.linklist:after,
 	display: none;
 }
 
-.linklist.compact .rightside > a strong {
-	padding-left: 2px;
-}
-
 .dropdown-page-jump .dropdown {
 	top: 20px;
 }