diff --git a/client/scss/components/_userbar.scss b/client/scss/components/_userbar.scss
index b489d874ea..ba8877be2c 100644
--- a/client/scss/components/_userbar.scss
+++ b/client/scss/components/_userbar.scss
@@ -119,7 +119,7 @@ $positions: (
   padding-inline-start: 0;
   text-decoration: none;
 
-  .w-userbar.is-active & {
+  .w-userbar--active & {
     visibility: visible;
   }
 }
@@ -379,7 +379,7 @@ $positions: (
       padding-#{$vertical}: theme('spacing.2');
     }
 
-    .w-userbar-nav .w-userbar__item {
+    .w-userbar__item {
       @if $vertical == 'bottom' {
         transform: translateY(1em);
       } @else {
@@ -387,7 +387,7 @@ $positions: (
       }
     }
 
-    &.is-active .w-userbar__item {
+    &.w-userbar--active .w-userbar__item {
       @for $i from 1 through $max-items {
         @if $vertical == 'bottom' {
           &:nth-last-child(#{$i}) {
@@ -410,7 +410,7 @@ $positions: (
 // =============================================================================
 
 // Active state for the list items comes last.
-.w-userbar.is-active .w-userbar__item {
+.w-userbar--active .w-userbar__item {
   transform: translateY(0);
   opacity: 1;
 }
diff --git a/client/src/includes/userbar.ts b/client/src/includes/userbar.ts
index b6ffcc62cb..346cbeef89 100644
--- a/client/src/includes/userbar.ts
+++ b/client/src/includes/userbar.ts
@@ -73,7 +73,7 @@ export class Userbar extends HTMLElement {
     }
 
     const listItems = list.querySelectorAll('li');
-    const isActiveClass = 'is-active';
+    const isActiveClass = 'w-userbar--active';
 
     this.trigger = trigger;