diff --git a/css/src/adminbar.css b/css/src/adminbar.css
index cd43c371b77..68e78ca0d76 100644
--- a/css/src/adminbar.css
+++ b/css/src/adminbar.css
@@ -111,6 +111,10 @@
   color: #f18500;
 }
 
+#wpadminbar .wpseo-no-adminbar-notifications {
+  display: none;
+}
+
 @media screen and (max-width: 782px) {
   #wp-admin-bar-wpseo-menu .wpseo-score-icon {
     margin: 16px 10px 0 2px !important;
diff --git a/inc/class-wpseo-admin-bar-menu.php b/inc/class-wpseo-admin-bar-menu.php
index 4b5f4d34c46..4fa28dbf711 100644
--- a/inc/class-wpseo-admin-bar-menu.php
+++ b/inc/class-wpseo-admin-bar-menu.php
@@ -359,6 +359,7 @@ protected function add_root_menu( WP_Admin_Bar $wp_admin_bar ) {
 		$settings_url       = '';
 		$counter            = '';
 		$notification_popup = '';
+		$notification_count = 0;
 
 		$post = $this->get_singular_post();
 		if ( $post ) {
@@ -377,7 +378,10 @@ protected function add_root_menu( WP_Admin_Bar $wp_admin_bar ) {
 		}
 
 		if ( empty( $score ) && ! is_network_admin() && $can_manage_options ) {
-			$counter            = $this->get_notification_counter();
+			$notification_center = Yoast_Notification_Center::get();
+			$notification_count  = $notification_center->get_notification_count();
+
+			$counter            = $this->get_notification_counter( $notification_count );
 			$notification_popup = $this->get_notification_popup();
 		}
 
@@ -389,7 +393,7 @@ protected function add_root_menu( WP_Admin_Bar $wp_admin_bar ) {
 		];
 		$wp_admin_bar->add_menu( $admin_bar_menu_args );
 
-		if ( ! empty( $counter ) ) {
+		if ( $notification_count > 0 ) {
 			$admin_bar_menu_args = [
 				'parent' => self::MENU_IDENTIFIER,
 				'id'     => 'wpseo-notifications',
@@ -849,18 +853,17 @@ protected function get_settings_page_url() {
 	/**
 	 * Gets the notification counter if in a valid context.
 	 *
+	 * @param int $notification_count Number of notifications.
+	 *
 	 * @return string Notification counter markup, or empty string if not available.
 	 */
-	protected function get_notification_counter() {
-		$notification_center = Yoast_Notification_Center::get();
-		$notification_count  = $notification_center->get_notification_count();
-
+	protected function get_notification_counter( $notification_count ) {
 		/* translators: Hidden accessibility text; %s: number of notifications. */
 		$counter_screen_reader_text = sprintf( _n( '%s notification', '%s notifications', $notification_count, 'wordpress-seo' ), number_format_i18n( $notification_count ) );
 
 		return sprintf(
 			' <div class="wp-core-ui wp-ui-notification yoast-issue-counter%s"><span class="yoast-issues-count" aria-hidden="true">%d</span><span class="screen-reader-text">%s</span></div>',
-			( $notification_count ) ? '' : ' yst-hidden',
+			( $notification_count ) ? '' : ' wpseo-no-adminbar-notifications',
 			$notification_count,
 			$counter_screen_reader_text
 		);
diff --git a/packages/js/src/shared-admin/helpers/notifications-count.js b/packages/js/src/shared-admin/helpers/notifications-count.js
index 94cf4776e1c..539f4839f0d 100644
--- a/packages/js/src/shared-admin/helpers/notifications-count.js
+++ b/packages/js/src/shared-admin/helpers/notifications-count.js
@@ -34,7 +34,7 @@ export const updateNotificationsCount = ( total ) => {
 
 	const adminBarItems = document.querySelectorAll( "#wp-admin-bar-wpseo-menu .yoast-issue-counter" );
 	for ( const adminBar of adminBarItems ) {
-		adminBar.classList.toggle( "yst-hidden", total === 0 );
+		adminBar.classList.toggle( "wpseo-no-adminbar-notifications", total === 0 );
 		updateTextContentIfElementExists( adminBar, ".yoast-issues-count", String( total ) );
 		updateTextContentIfElementExists( adminBar, ".screen-reader-text", screenReaderText );
 	}
diff --git a/packages/js/tests/shared-admin/helpers/__snapshots__/notifications-count.test.js.snap b/packages/js/tests/shared-admin/helpers/__snapshots__/notifications-count.test.js.snap
index 382865b0201..37a860a4034 100644
--- a/packages/js/tests/shared-admin/helpers/__snapshots__/notifications-count.test.js.snap
+++ b/packages/js/tests/shared-admin/helpers/__snapshots__/notifications-count.test.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`updateNotificationsCount updates the total in the admin bar to 0 [yst-hidden class triggering hidden css] 1`] = `
+exports[`updateNotificationsCount updates the total in the admin bar to 0 [wpseo-no-adminbar-notifications class triggering hidden css] 1`] = `
 <div>
   <div
     class="no-js"
@@ -29,7 +29,7 @@ exports[`updateNotificationsCount updates the total in the admin bar to 0 [yst-h
             role="menuitem"
           >
             <div
-              class="wp-core-ui wp-ui-notification yoast-issue-counter yst-hidden"
+              class="wp-core-ui wp-ui-notification yoast-issue-counter wpseo-no-adminbar-notifications"
             >
               <span
                 aria-hidden="true"
@@ -63,7 +63,7 @@ exports[`updateNotificationsCount updates the total in the admin bar to 0 [yst-h
                 >
                   Notifications 
                   <div
-                    class="wp-core-ui wp-ui-notification yoast-issue-counter yst-hidden"
+                    class="wp-core-ui wp-ui-notification yoast-issue-counter wpseo-no-adminbar-notifications"
                   >
                     <span
                       aria-hidden="true"
diff --git a/packages/js/tests/shared-admin/helpers/notifications-count.test.js b/packages/js/tests/shared-admin/helpers/notifications-count.test.js
index d6a45b94c6d..814431502bc 100644
--- a/packages/js/tests/shared-admin/helpers/notifications-count.test.js
+++ b/packages/js/tests/shared-admin/helpers/notifications-count.test.js
@@ -47,7 +47,7 @@ const FakeAdminMenu = ( { total = 2 } ) => (
  * @returns {JSX.Element} The admin bar count.
  */
 const AdminBarCountHtml = ( { total } ) => (
-	<div className={ `wp-core-ui wp-ui-notification yoast-issue-counter${ total === 0 ? " yst-hidden" : "" }` }>
+	<div className={ `wp-core-ui wp-ui-notification yoast-issue-counter${ total === 0 ? " wpseo-no-adminbar-notifications" : "" }` }>
 		<span className="yoast-issues-count" aria-hidden="true">${ total }</span>
 		<span className="screen-reader-text">${ total } notifications</span>
 	</div>
@@ -113,7 +113,7 @@ describe( "updateNotificationsCount", () => {
 	test.each( [
 		[ 3, "screen-reader plural in English" ],
 		[ 1, "screen-reader singular in English" ],
-		[ 0, "yst-hidden class triggering hidden css" ],
+		[ 0, "wpseo-no-adminbar-notifications class triggering hidden css" ],
 	] )( "updates the total in the admin bar to %i [%s]", ( total ) => {
 		const { container } = render( <FakeAdminBar /> );
 		updateNotificationsCount( total );