diff --git a/templates/zerver/portico-header-dropdown.html b/templates/zerver/portico-header-dropdown.html
index 3906ad12a5..238a6eeb0f 100644
--- a/templates/zerver/portico-header-dropdown.html
+++ b/templates/zerver/portico-header-dropdown.html
@@ -1,5 +1,5 @@
-<div class="dropdown">
-    <div class="dropdown-pill">
+<div class="portico-header-dropdown">
+    <div class="portico-header-dropdown-pill">
         <img class="header-realm-icon" src="{{ realm_icon }}" alt="{{ _('Go to Zulip') }}"/>
         <div class="realm-name">{{ realm_name }}<i class="fa fa-chevron-down"></i></div>
     </div>
diff --git a/web/src/portico/header.ts b/web/src/portico/header.ts
index 630b1a61eb..79e89cbe7d 100644
--- a/web/src/portico/header.ts
+++ b/web/src/portico/header.ts
@@ -87,8 +87,8 @@ $(() => {
         return false;
     });
 
-    $(".portico-header .dropdown").on("click", (e) => {
-        const $user_dropdown = $(e.target).closest(".dropdown");
+    $(".portico-header .portico-header-dropdown").on("click", (e) => {
+        const $user_dropdown = $(e.target).closest(".portico-header-dropdown");
         const dropdown_is_shown = $user_dropdown.hasClass("show");
 
         if (!dropdown_is_shown) {
diff --git a/web/styles/portico/portico.css b/web/styles/portico/portico.css
index b818baffd6..06899759e4 100644
--- a/web/styles/portico/portico.css
+++ b/web/styles/portico/portico.css
@@ -427,7 +427,7 @@ input.text-error {
 }
 
 .portico-header {
-    .dropdown {
+    .portico-header-dropdown {
         position: relative;
         display: inline-block;
 
@@ -504,7 +504,7 @@ input.text-error {
         }
     }
 
-    .dropdown-pill {
+    .portico-header-dropdown-pill {
         border: 1px solid hsl(0deg 0% 0% / 20%);
         border-radius: 4px;
         margin-left: 10px;