diff --git a/src/app/search-navbar/search-navbar.component.html b/src/app/search-navbar/search-navbar.component.html
index 84ffb5b38dc..f78acfeb45b 100644
--- a/src/app/search-navbar/search-navbar.component.html
+++ b/src/app/search-navbar/search-navbar.component.html
@@ -1,4 +1,4 @@
-<div [title]="'nav.search' | translate" (dsClickOutside)="collapse()">
+<div class="search-navbar-container" [title]="'nav.search' | translate" (dsClickOutside)="collapse()">
   <div class="d-inline-block position-relative">
     <form [formGroup]="searchForm" (ngSubmit)="onSubmit(searchForm.value)" autocomplete="on" class="d-flex">
       <input #searchInput [@toggleAnimation]="isExpanded" [attr.aria-label]="('nav.search' | translate)" name="query"
diff --git a/src/app/shared/auth-nav-menu/auth-nav-menu.component.html b/src/app/shared/auth-nav-menu/auth-nav-menu.component.html
index 4ea43a7af9e..99f29be8535 100644
--- a/src/app/shared/auth-nav-menu/auth-nav-menu.component.html
+++ b/src/app/shared/auth-nav-menu/auth-nav-menu.component.html
@@ -9,12 +9,11 @@
               role="button"
               tabindex="0"
               aria-haspopup="menu"
-              aria-controls="loginDropdownMenu"
               [attr.aria-expanded]="loginDrop.isOpen()"
               ngbDropdownToggle>
         {{ 'nav.login' | translate }}
       </button>
-      <div id="loginDropdownMenu" [ngClass]="{'pl-3 pr-3': (loading | async)}" ngbDropdownMenu
+      <div class="loginDropdownMenu" [ngClass]="{'pl-3 pr-3': (loading | async)}" ngbDropdownMenu
            role="dialog"
            aria-modal="true"
            [attr.aria-label]="'nav.login' | translate">
@@ -35,7 +34,7 @@
         [attr.data-test]="'user-menu' | dsBrowserOnly"
         ngbDropdownToggle>
         <i class="fas fa-user-circle fa-lg fa-fw"></i></button>
-      <div id="logoutDropdownMenu" ngbDropdownMenu>
+      <div class="logoutDropdownMenu" ngbDropdownMenu>
         <ds-user-menu [inExpandableNavbar]="false"></ds-user-menu>
       </div>
     </div>
diff --git a/src/app/shared/auth-nav-menu/auth-nav-menu.component.scss b/src/app/shared/auth-nav-menu/auth-nav-menu.component.scss
index 1247cf88ad2..30af6bed830 100644
--- a/src/app/shared/auth-nav-menu/auth-nav-menu.component.scss
+++ b/src/app/shared/auth-nav-menu/auth-nav-menu.component.scss
@@ -1,9 +1,9 @@
-#loginDropdownMenu, #logoutDropdownMenu {
+.loginDropdownMenu, .logoutDropdownMenu {
   min-width: 330px;
   z-index: 1002;
 }
 
-#loginDropdownMenu {
+.loginDropdownMenu {
   min-height: 75px;
 }
 
diff --git a/src/app/shared/auth-nav-menu/auth-nav-menu.component.spec.ts b/src/app/shared/auth-nav-menu/auth-nav-menu.component.spec.ts
index 54fc8a44b8d..3b6af4dd92f 100644
--- a/src/app/shared/auth-nav-menu/auth-nav-menu.component.spec.ts
+++ b/src/app/shared/auth-nav-menu/auth-nav-menu.component.spec.ts
@@ -214,7 +214,7 @@ describe('AuthNavMenuComponent', () => {
         });
 
         it('should render login dropdown menu', () => {
-          const loginDropdownMenu = deNavMenuItem.query(By.css('div#loginDropdownMenu'));
+          const loginDropdownMenu = deNavMenuItem.query(By.css('div.loginDropdownMenu'));
           expect(loginDropdownMenu.nativeElement).toBeDefined();
         });
       });
diff --git a/src/themes/custom/app/search-navbar/search-navbar.component.html b/src/themes/custom/app/search-navbar/search-navbar.component.html
index 02a98905021..c60e1139594 100644
--- a/src/themes/custom/app/search-navbar/search-navbar.component.html
+++ b/src/themes/custom/app/search-navbar/search-navbar.component.html
@@ -1,4 +1,4 @@
-<div id="search-navbar-container" [title]="'nav.search' | translate" (dsClickOutside)="collapse()">
+<div class="search-navbar-container" [title]="'nav.search' | translate" (dsClickOutside)="collapse()">
   <div class="d-inline-block position-relative">
     <form [formGroup]="searchForm" (ngSubmit)="onSubmit(searchForm.value)" autocomplete="on" class="d-flex">
       <input #searchInput [@toggleAnimation]="isExpanded" [attr.aria-label]="('nav.search' | translate)" name="query"
diff --git a/src/themes/custom/app/shared/auth-nav-menu/auth-nav-menu.component.html b/src/themes/custom/app/shared/auth-nav-menu/auth-nav-menu.component.html
index 10265df8a4b..8cf169ec206 100644
--- a/src/themes/custom/app/shared/auth-nav-menu/auth-nav-menu.component.html
+++ b/src/themes/custom/app/shared/auth-nav-menu/auth-nav-menu.component.html
@@ -9,12 +9,11 @@
               role="button"
               tabindex="0"
               aria-haspopup="menu"
-              aria-controls="loginDropdownMenu"
               [attr.aria-expanded]="loginDrop.isOpen()"
               ngbDropdownToggle>
         {{ 'nav.login' | translate }}
       </button>
-      <div id="loginDropdownMenu" [ngClass]="{'pl-3 pr-3': (loading | async)}" ngbDropdownMenu
+      <div class="loginDropdownMenu" [ngClass]="{'pl-3 pr-3': (loading | async)}" ngbDropdownMenu
            role="dialog"
            aria-modal="true"
            [attr.aria-label]="'nav.login' | translate">
@@ -35,7 +34,7 @@
         [attr.data-test]="'user-menu' | dsBrowserOnly"
         ngbDropdownToggle>
         <i class="fas fa-user-circle fa-lg fa-fw"></i></button>
-      <div id="logoutDropdownMenu" ngbDropdownMenu>
+      <div class="logoutDropdownMenu" ngbDropdownMenu>
         <ds-themed-user-menu [inExpandableNavbar]="false"></ds-themed-user-menu>
       </div>
     </div>
diff --git a/src/themes/custom/app/shared/auth-nav-menu/auth-nav-menu.component.scss b/src/themes/custom/app/shared/auth-nav-menu/auth-nav-menu.component.scss
index c5a5253d1fc..41bf3eff3b8 100644
--- a/src/themes/custom/app/shared/auth-nav-menu/auth-nav-menu.component.scss
+++ b/src/themes/custom/app/shared/auth-nav-menu/auth-nav-menu.component.scss
@@ -1,4 +1,4 @@
-#loginDropdownMenu, #logoutDropdownMenu {
+.loginDropdownMenu, .logoutDropdownMenu {
   min-width: 330px;
   z-index: 1002;
 }