From b0f63707b556d444358006d2931c91256a7ea812 Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Mon, 2 Feb 2026 17:55:32 +0100
Subject: [PATCH 1/4] 138319: Fixed navbar CSS variables not being applied
 correctly

- Also removed $ds-navbar-dropdown-bg because this is a duplicate of $ds-expandable-navbar-bg
- Restored border around expandable navbar sections
- Removed --ds-header-logo-height-xs (this variable has already been replaced with media queries)
- Made the navbar border size configurable similar to the DSpace them (--ds-header-navbar-border-bottom-height)
- Removed --ds-header-navbar-border-top-color since it's unused
---
 .../header-navbar-wrapper.component.scss      |  2 +-
 .../expandable-navbar-section.component.scss  |  5 ++-
 src/app/navbar/navbar.component.scss          | 31 ++++++++++++++++--
 src/styles/_bootstrap_variables.scss          |  5 ++-
 src/styles/_bootstrap_variables_mapping.scss  |  2 +-
 src/styles/_custom_variables.scss             | 13 ++++----
 .../styles/_theme_css_variable_overrides.scss |  1 -
 .../header-navbar-wrapper.component.scss      | 32 +++++++++++++++++--
 8 files changed, 70 insertions(+), 21 deletions(-)

diff --git a/src/app/header-nav-wrapper/header-navbar-wrapper.component.scss b/src/app/header-nav-wrapper/header-navbar-wrapper.component.scss
index c1bc9c7e909..3965380054d 100644
--- a/src/app/header-nav-wrapper/header-navbar-wrapper.component.scss
+++ b/src/app/header-nav-wrapper/header-navbar-wrapper.component.scss
@@ -1,6 +1,6 @@
 :host {
   position: relative;
   div#header-navbar-wrapper {
-    border-bottom: 1px var(--ds-header-navbar-border-bottom-color) solid;
+    border-bottom: var(--ds-header-navbar-border-bottom-height) var(--ds-header-navbar-border-bottom-color) solid;
   }
 }
diff --git a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss
index ab0934e9024..77d3c5239ed 100644
--- a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss
+++ b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss
@@ -7,14 +7,13 @@
     overflow: hidden;
     min-width: 100%;
     top: 100%;
-    @include media-breakpoint-down(xs) {
+    @include media-breakpoint-down(sm) {
       border: 0;
-      background-color: var(--ds-expandable-navbar-bg);
+      border-radius: 0;
     }
     @include media-breakpoint-up(md) {
       border-top-left-radius: 0;
       border-top-right-radius: 0;
-      background-color: var(--ds-navbar-dropdown-bg);
     }
   }
 
diff --git a/src/app/navbar/navbar.component.scss b/src/app/navbar/navbar.component.scss
index bbf5feec156..96c491e2645 100644
--- a/src/app/navbar/navbar.component.scss
+++ b/src/app/navbar/navbar.component.scss
@@ -19,7 +19,7 @@
       &.open {
         height: auto;
         min-height: 100vh; //doesn't matter because wrapper is sticky
-        border-bottom: 1px var(--ds-header-navbar-border-bottom-color) solid; // open navbar covers header-navbar-wrapper border
+        border-bottom: var(--ds-header-navbar-border-bottom-height) var(--ds-header-navbar-border-bottom-color) solid; // open navbar covers header-navbar-wrapper border
       }
     }
   }
@@ -53,12 +53,37 @@
 
     .ds-menu-item {
       display: block;
-      color: var(--ds-navbar-link-color);
       padding: 0.5rem 0;
+    }
+  }
+
+  #main-navbar ::ng-deep .ds-menu-item-wrapper {
+    background-color: var(--ds-navbar-link-bg-color);
+
+    .toggle-menu-icon, .ds-menu-item:not(.dropdown-menu .ds-menu-item) {
+      color: var(--ds-navbar-link-color);
+    }
+
+    &:hover, &:focus {
+      background-color: var(--ds-navbar-link-bg-color-hover);
 
-      &:hover, &:focus {
+      .toggle-menu-icon, .ds-menu-item:not(.dropdown-menu .ds-menu-item) {
         color: var(--ds-navbar-link-color-hover);
       }
+
+      .dropdown-menu {
+        background-color: var(--ds-expandable-navbar-bg);
+
+        .ds-menu-item {
+          color: var(--ds-expandable-navbar-link-color);
+          background-color: var(--ds-expandable-navbar-link-bg);
+
+          &:hover, &:focus {
+            color: var(--ds-expandable-navbar-link-color-hover);
+            background-color: var(--ds-expandable-navbar-link-bg-hover);
+          }
+        }
+      }
     }
   }
 }
diff --git a/src/styles/_bootstrap_variables.scss b/src/styles/_bootstrap_variables.scss
index fc470e44909..84eca3c423c 100644
--- a/src/styles/_bootstrap_variables.scss
+++ b/src/styles/_bootstrap_variables.scss
@@ -65,9 +65,9 @@ $pagination-disabled-bg: white;
 
 $icon-font-family: "Font Awesome 6 Free"; /* Define the font-family for icons */
 
-$border-radius: 0.25em;
+$border-radius: 0.25em !default;
 
-$bs-border-radius-lg: 0.3rem;
+$border-radius-lg: 0.3rem !default;
 
 $badge-padding-x: 0.4em;
 $badge-padding-y: 0.25em;
@@ -89,7 +89,6 @@ $ds-header-icon-color: $link-color !default;
 $ds-header-icon-color-hover: $link-hover-color !default;
 
 $ds-navbar-bg: #fff !default;
-$ds-navbar-dropdown-bg: #fff !default;
 $ds-expandable-navbar-bg: #fff !default;
 $ds-navbar-link-color: $link-color !default;
 $ds-navbar-link-color-hover: #{darken($ds-navbar-link-color, 15%)} !default;
diff --git a/src/styles/_bootstrap_variables_mapping.scss b/src/styles/_bootstrap_variables_mapping.scss
index 0cfa811b004..d17b8a1cb20 100644
--- a/src/styles/_bootstrap_variables_mapping.scss
+++ b/src/styles/_bootstrap_variables_mapping.scss
@@ -89,7 +89,7 @@
   --bs-zindex-popover: #{$zindex-popover};
   --bs-zindex-sticky: #{$zindex-sticky};
 
-  --bs-border-radius-lg: #{$bs-border-radius-lg};
+  --bs-border-radius-lg: #{$border-radius-lg};
 
 }
 
diff --git a/src/styles/_custom_variables.scss b/src/styles/_custom_variables.scss
index 5bc8a54ae9a..2a536492f19 100644
--- a/src/styles/_custom_variables.scss
+++ b/src/styles/_custom_variables.scss
@@ -22,26 +22,27 @@
 
   --ds-header-bg: #{$ds-header-bg};
   --ds-header-logo-height: 50px;
-  --ds-header-logo-height-xs: 50px;
   --ds-header-icon-color: #{$ds-header-icon-color};
   --ds-header-icon-color-hover: #{$ds-header-icon-color-hover};
 
   --ds-navbar-bg: #{$ds-navbar-bg};
   --ds-navbar-item-vertical-padding: 0;
   --ds-navbar-item-horizontal-padding: 0.25rem;
-  --ds-navbar-dropdown-bg: #{$ds-navbar-dropdown-bg};
   --ds-navbar-dropdown-item-vertical-padding: 0.5rem;
   --ds-navbar-dropdown-item-horizontal-padding: 1rem;
   --ds-navbar-link-color: #{$ds-navbar-link-color};
+  --ds-navbar-link-bg: var(--ds-navbar-bg);
   --ds-navbar-link-color-hover: #{$ds-navbar-link-color-hover};
+  --ds-navbar-link-bg-hover: var(--ds-navbar-link-bg);
 
-  --ds-header-navbar-border-top-color: #{$ds-header-navbar-border-bottom-color};
   --ds-header-navbar-border-bottom-color: #{$ds-header-navbar-border-bottom-color};
+  --ds-header-navbar-border-bottom-height: 1px;
 
   --ds-expandable-navbar-bg: #{$ds-expandable-navbar-bg};
-  --ds-expandable-navbar-link-color: #{$body-color};
-  --ds-expandable-navbar-link-color-hover: #{$body-color};
-  --ds-expandable-navbar-link-background-hover: #{$ds-navbar-link-color-hover};
+  --ds-expandable-navbar-link-color: #{$ds-navbar-link-color};
+  --ds-expandable-navbar-link-bg: var(--ds-expandable-navbar-bg);
+  --ds-expandable-navbar-link-color-hover: #{$ds-navbar-link-color-hover};
+  --ds-expandable-navbar-link-bg-hover: var(--ds-expandable-navbar-link-bg);
   --ds-expandable-navbar-item-vertical-padding: 0.25rem;
 
   --ds-user-menu-item-vertical-padding: 0.25rem;
diff --git a/src/themes/custom/styles/_theme_css_variable_overrides.scss b/src/themes/custom/styles/_theme_css_variable_overrides.scss
index 3ff54cbf8f8..9018fbcb25f 100644
--- a/src/themes/custom/styles/_theme_css_variable_overrides.scss
+++ b/src/themes/custom/styles/_theme_css_variable_overrides.scss
@@ -2,7 +2,6 @@
 
 :root {
   //--ds-header-logo-height: 80px;
-  //--ds-header-logo-height-xs: 50px;
   //--ds-header-icon-color: #{$link-color};
   //--ds-header-icon-color-hover: #{darken($link-color, 15%)};
 }
diff --git a/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.scss b/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.scss
index 5293fdfb577..d969c45586a 100644
--- a/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.scss
+++ b/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.scss
@@ -45,10 +45,36 @@
           // define here the style for top-level navbar menu items
           padding: var(--ds-navbar-item-vertical-padding) var(--ds-navbar-item-horizontal-padding);
         }
-        .ds-menu-item, .ds-menu-toggler-wrapper {
-          color: var(--ds-navbar-link-color) !important;
+
+        .ds-menu-item-wrapper {
+          color: var(--ds-navbar-link-color);
+          background-color: var(--ds-navbar-link-bg);
+
+          .toggle-menu-icon, .ds-menu-item:not(.dropdown-menu .ds-menu-item) {
+            color: var(--ds-navbar-link-color);
+          }
+
           &:hover, &:focus {
-            color: var(--ds-navbar-link-color-hover) !important;
+            color: var(--ds-navbar-link-color-hover);
+            background-color: var(--ds-navbar-link-bg-hover);
+
+            .toggle-menu-icon, .ds-menu-item:not(.dropdown-menu .ds-menu-item) {
+              color: var(--ds-navbar-link-color-hover);
+            }
+
+            .dropdown-menu {
+              background-color: var(--ds-expandable-navbar-bg);
+
+              .ds-menu-item {
+                color: var(--ds-expandable-navbar-link-color);
+                background-color: var(--ds-expandable-navbar-link-bg);
+
+                &:hover, &:focus {
+                  color: var(--ds-expandable-navbar-link-color-hover);
+                  background-color: var(--ds-expandable-navbar-link-bg-hover);
+                }
+              }
+            }
           }
         }
 

From 9e2405cdf09b87705520cd54824925ef664039af Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Mon, 2 Feb 2026 18:44:23 +0100
Subject: [PATCH 2/4] 138319: Fixed small accessibility issues

- Links with different destinations: the breadcrumbs & the header logo both point to the Home page but used different links
- The accessibility settings page didn't have a h1 & didn't link its labels & input fields correctly
- Add missing autocomplete attribute to feedback form & remove title on inputs
- Disabled autocomplete on search navbar
---
 src/app/breadcrumbs/breadcrumbs.component.html     |  2 +-
 src/app/breadcrumbs/breadcrumbs.component.spec.ts  |  2 +-
 .../accessibility-settings.component.html          | 14 ++++++--------
 .../feedback-form/feedback-form.component.html     |  6 +++---
 src/app/search-navbar/search-navbar.component.html |  5 +++--
 5 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/src/app/breadcrumbs/breadcrumbs.component.html b/src/app/breadcrumbs/breadcrumbs.component.html
index b16f46f082e..0d1dfc14730 100644
--- a/src/app/breadcrumbs/breadcrumbs.component.html
+++ b/src/app/breadcrumbs/breadcrumbs.component.html
@@ -3,7 +3,7 @@
     <nav aria-label="breadcrumb" class="nav-breadcrumb">
       <ol class="container breadcrumb my-0">
         <ng-container
-        *ngTemplateOutlet="breadcrumbs?.length > 0 ? breadcrumb : activeBreadcrumb; context: {text: 'home.breadcrumbs', url: '/'}"></ng-container>
+        *ngTemplateOutlet="breadcrumbs?.length > 0 ? breadcrumb : activeBreadcrumb; context: {text: 'home.breadcrumbs', url: '/home'}"></ng-container>
         @for (bc of breadcrumbs; track bc; let last = $last) {
           <ng-container *ngTemplateOutlet="!last ? breadcrumb : activeBreadcrumb; context: bc"></ng-container>
         }
diff --git a/src/app/breadcrumbs/breadcrumbs.component.spec.ts b/src/app/breadcrumbs/breadcrumbs.component.spec.ts
index 1e4a252c237..170da41a334 100644
--- a/src/app/breadcrumbs/breadcrumbs.component.spec.ts
+++ b/src/app/breadcrumbs/breadcrumbs.component.spec.ts
@@ -75,7 +75,7 @@ describe('BreadcrumbsComponent', () => {
   it('should render the breadcrumbs', () => {
     const breadcrumbs = fixture.debugElement.queryAll(By.css('.breadcrumb-item'));
     expect(breadcrumbs.length).toBe(3);
-    expectBreadcrumb(breadcrumbs[0], 'home.breadcrumbs', '/');
+    expectBreadcrumb(breadcrumbs[0], 'home.breadcrumbs', '/home');
     expectBreadcrumb(breadcrumbs[1], 'bc 1', '/example.com');
     expectBreadcrumb(breadcrumbs[2].query(By.css('.text-truncate')), 'bc 2', null);
   });
diff --git a/src/app/info/accessibility-settings/accessibility-settings.component.html b/src/app/info/accessibility-settings/accessibility-settings.component.html
index 25c9d708a70..e591abd0d10 100644
--- a/src/app/info/accessibility-settings/accessibility-settings.component.html
+++ b/src/app/info/accessibility-settings/accessibility-settings.component.html
@@ -1,14 +1,14 @@
 <div class="container">
-  <h2>{{ 'info.accessibility-settings.title' | translate }}</h2>
+  <h1>{{ 'info.accessibility-settings.title' | translate }}</h1>
 
   <form>
     <div class="form-group row">
-      <label [for]="'disableNotificationTimeOutInput'" class="col-sm-4 col-form-label">
+      <span aria-hidden="true" class="col-sm-4 col-form-label">
         {{ 'info.accessibility-settings.disableNotificationTimeOut.label' | translate }}
-      </label>
+      </span>
 
       <div class="col-sm-4">
-        <ui-switch [id]="'disableNotificationTimeOutInput'"
+        <ui-switch [ariaLabel]="'info.accessibility-settings.disableNotificationTimeOut.label' | translate"
                    [(ngModel)]="formValues.notificationTimeOutEnabled"
                    [ngModelOptions]="{ standalone: true }"
         ></ui-switch>
@@ -33,8 +33,7 @@ <h2>{{ 'info.accessibility-settings.title' | translate }}</h2>
           [ngClass]="{'is-invalid': !settingsService.isValid('notificationTimeOut', formValues)}"
           [min]="1"
           [readOnly]="!formValues.notificationTimeOutEnabled"
-          [(ngModel)]="formValues.notificationTimeOut" [ngModelOptions]="{ standalone: true }"
-          [attr.aria-describedby]="'notificationTimeOutHint'">
+          [(ngModel)]="formValues.notificationTimeOut" [ngModelOptions]="{ standalone: true }">
         <div class="invalid-feedback" [ngClass]="{ 'd-block': !settingsService.isValid('notificationTimeOut', formValues) }">
           {{ 'info.accessibility-settings.notificationTimeOut.invalid' | translate }}
         </div>
@@ -59,8 +58,7 @@ <h2>{{ 'info.accessibility-settings.title' | translate }}</h2>
         <input [type]="'number'" [id]="'liveRegionTimeOutInput'" class="form-control"
           [ngClass]="{'is-invalid': !settingsService.isValid('liveRegionTimeOut', formValues)}"
           [min]="1"
-          [(ngModel)]="formValues.liveRegionTimeOut" [ngModelOptions]="{ standalone: true }"
-          [attr.aria-describedby]="'liveRegionTimeOutHint'">
+          [(ngModel)]="formValues.liveRegionTimeOut" [ngModelOptions]="{ standalone: true }">
         <div class="invalid-feedback" [ngClass]="{ 'd-block': !settingsService.isValid('liveRegionTimeOut', formValues) }">
           {{ 'info.accessibility-settings.liveRegionTimeOut.invalid' | translate }}
         </div>
diff --git a/src/app/info/feedback/feedback-form/feedback-form.component.html b/src/app/info/feedback/feedback-form/feedback-form.component.html
index a1ee88df3b5..c2d419417ce 100644
--- a/src/app/info/feedback/feedback-form/feedback-form.component.html
+++ b/src/app/info/feedback/feedback-form/feedback-form.component.html
@@ -6,7 +6,7 @@ <h1>{{ 'info.feedback.head' | translate }}</h1>
       <div class="row mt-3">
         <div class="control-group col-sm-12">
             <label class="control-label form-label" for="email">{{ 'info.feedback.email-label' | translate }}&nbsp;</label>
-          <input id="email" class="form-control" name="email" type="text" value="" formControlName="email" autofocus="autofocus" title="{{ 'info.feedback.email_help' | translate }}">
+          <input autocomplete="email" id="email" class="form-control" name="email" type="text" value="" formControlName="email" autofocus="autofocus">
           <small class="text-muted">{{ 'info.feedback.email_help' | translate }}</small>
         </div>
       </div>
@@ -27,7 +27,7 @@ <h1>{{ 'info.feedback.head' | translate }}</h1>
       <div class="row mt-3">
         <div class="control-group col-sm-12">
             <label class="control-label form-label" for="comments">{{ 'info.feedback.comments' | translate }}:&nbsp;</label>
-          <textarea id="comments" formControlName="message" class="form-control" name="message" cols="20" rows="5"> </textarea>
+          <textarea autocomplete="off" id="comments" formControlName="message" class="form-control" name="message" cols="20" rows="5"> </textarea>
         </div>
       </div>
 
@@ -44,7 +44,7 @@ <h1>{{ 'info.feedback.head' | translate }}</h1>
       <div class="row mt-3">
         <div class="control-group col-sm-12">
             <label class="control-label form-labe" for="page">{{ 'info.feedback.page-label' | translate }}&nbsp;</label>
-          <input id="page" readonly class="form-control" name="page" type="text" value="" formControlName="page" autofocus="autofocus" title="{{ 'info.feedback.page_help' | translate }}">
+          <input autocomplete="off" id="page" readonly class="form-control" name="page" type="text" value="" formControlName="page" autofocus="autofocus">
           <small class="text-muted">{{ 'info.feedback.page_help' | translate }}</small>
         </div>
       </div>
diff --git a/src/app/search-navbar/search-navbar.component.html b/src/app/search-navbar/search-navbar.component.html
index d3148cf37f2..6c2fb481f40 100644
--- a/src/app/search-navbar/search-navbar.component.html
+++ b/src/app/search-navbar/search-navbar.component.html
@@ -1,8 +1,9 @@
-<div [title]="'nav.search' | translate" (dsClickOutside)="collapse()">
+<div (dsClickOutside)="collapse()">
   <div class="d-inline-block position-relative">
-    <form [formGroup]="searchForm" (ngSubmit)="onSubmit(searchForm.value)" autocomplete="on" class="d-flex">
+    <form [formGroup]="searchForm" (ngSubmit)="onSubmit(searchForm.value)" class="d-flex">
       <input #searchInput [@toggleAnimation]="isExpanded" [attr.aria-label]="('nav.search' | translate)" name="query"
              formControlName="query" type="text" placeholder="{{searchExpanded ? ('nav.search' | translate) : ''}}"
+             autocomplete="off"
              class="d-inline-block bg-transparent position-absolute form-control dropdown-menu-right p1"
              [class.display]="searchExpanded ? 'inline-block' : 'none'"
              [tabIndex]="searchExpanded ? 0 : -1"

From 0147e8bce050ca3d88248df1f6e3b63df4dcd4c9 Mon Sep 17 00:00:00 2001
From: Bram Maegerman <bram.maegerman@telenet.be>
Date: Wed, 18 Mar 2026 09:32:38 +0100
Subject: [PATCH 3/4] 139606: improved styling on user-menu &
 expandable-navbar-section components

---
 .../header-navbar-wrapper.component.scss      | 10 +++
 .../expandable-navbar-section.component.html  |  2 +-
 .../expandable-navbar-section.component.scss  |  8 +-
 src/app/navbar/navbar.component.scss          | 29 +++----
 .../auth-nav-menu.component.scss              |  4 +
 .../user-menu/user-menu.component.html        |  4 +-
 .../user-menu/user-menu.component.scss        | 47 +++++------
 src/styles/_custom_variables.scss             | 32 +++++---
 .../header-navbar-wrapper.component.scss      | 79 +------------------
 .../dspace/app/navbar/navbar.component.scss   | 53 ++++++++++++-
 10 files changed, 132 insertions(+), 136 deletions(-)

diff --git a/src/app/header-nav-wrapper/header-navbar-wrapper.component.scss b/src/app/header-nav-wrapper/header-navbar-wrapper.component.scss
index 3965380054d..9f47cea14cd 100644
--- a/src/app/header-nav-wrapper/header-navbar-wrapper.component.scss
+++ b/src/app/header-nav-wrapper/header-navbar-wrapper.component.scss
@@ -3,4 +3,14 @@
   div#header-navbar-wrapper {
     border-bottom: var(--ds-header-navbar-border-bottom-height) var(--ds-header-navbar-border-bottom-color) solid;
   }
+
+  ::ng-deep {
+    nav#desktop-navbar {
+      .ds-menu-item-wrapper {
+        &:hover, &:focus {
+          background-color: var(--ds-navbar-link-bg-hover);
+        }
+      }
+    }
+  }
 }
diff --git a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html
index 05e9fde9816..d10724afc05 100644
--- a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html
+++ b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.html
@@ -28,7 +28,7 @@
         [dsHoverOutsideOfParentSelector]="'#expandable-navbar-section-' + section.id"
         (dsHoverOutside)="deactivateSection($event, false)"
         role="menu"
-        class="dropdown-menu show nav-dropdown-menu m-0 shadow-none border-top-0 px-3 px-md-0 pt-0 pt-md-1">
+        class="dropdown-menu show nav-dropdown-menu m-0 shadow-none border-top-0">
         <div @slide role="presentation">
           @for (subSection of (subSections$ | async); track subSection) {
             <div class="text-nowrap" role="presentation">
diff --git a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss
index 77d3c5239ed..d3a4d50711b 100644
--- a/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss
+++ b/src/app/navbar/expandable-navbar-section/expandable-navbar-section.component.scss
@@ -7,7 +7,9 @@
     overflow: hidden;
     min-width: 100%;
     top: 100%;
-    @include media-breakpoint-down(sm) {
+    padding: var(--ds-expandable-navbar-padding);
+
+    @include media-breakpoint-down(md) {
       border: 0;
       border-radius: 0;
     }
@@ -15,6 +17,10 @@
       border-top-left-radius: 0;
       border-top-right-radius: 0;
     }
+
+    ::ng-deep .ds-menu-item {
+      padding: var(--ds-expandable-navbar-item-padding);
+    }
   }
 
   .toggle-menu-icon {
diff --git a/src/app/navbar/navbar.component.scss b/src/app/navbar/navbar.component.scss
index 96c491e2645..1071193be42 100644
--- a/src/app/navbar/navbar.component.scss
+++ b/src/app/navbar/navbar.component.scss
@@ -10,7 +10,7 @@
   /** Mobile menu styling **/
   @media screen and (max-width: map-get($grid-breakpoints, md)-0.02) {
     .navbar {
-      width: 100vw;
+      width: 100%;
       background-color: var(--bs-white);
       position: absolute;
       overflow: hidden;
@@ -24,13 +24,6 @@
     }
   }
 
-  @media screen and (min-width: map-get($grid-breakpoints, md)) {
-    .reset-padding-md {
-      margin-left: calc(var(--bs-spacer) / -1);
-      margin-right: calc(var(--bs-spacer) / -1);
-    }
-  }
-
   /* TODO remove when https://github.com/twbs/bootstrap/issues/24726 is fixed */
   .navbar-expand-md.navbar-container {
     @media screen and (max-width: map-get($grid-breakpoints, md)-0.02) {
@@ -42,30 +35,30 @@
   }
 
   #main-navbar ::ng-deep {
-    .ds-menu-item, .ds-menu-toggler-wrapper {
-      white-space: nowrap;
+    .ds-menu-toggler-wrapper {
       text-decoration: none;
     }
 
-    .dropdown-menu {
-      padding: 0.5rem !important;
-    }
-
     .ds-menu-item {
+      text-decoration: none;
       display: block;
-      padding: 0.5rem 0;
+      width: 100%;
+
+      &:not(.dropdown-menu .ds-menu-item) {
+        padding: var(--ds-navbar-item-padding);
+      }
     }
   }
 
-  #main-navbar ::ng-deep .ds-menu-item-wrapper {
-    background-color: var(--ds-navbar-link-bg-color);
+  #main-navbar ::ng-deep .ds-menu-item-wrapper:not(ds-user-menu .ds-menu-item-wrapper) {
+    background-color: var(--ds-navbar-link-bg);
 
     .toggle-menu-icon, .ds-menu-item:not(.dropdown-menu .ds-menu-item) {
       color: var(--ds-navbar-link-color);
     }
 
     &:hover, &:focus {
-      background-color: var(--ds-navbar-link-bg-color-hover);
+      background-color: var(--ds-navbar-link-bg-hover);
 
       .toggle-menu-icon, .ds-menu-item:not(.dropdown-menu .ds-menu-item) {
         color: var(--ds-navbar-link-color-hover);
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 7d4ec043aca..a6ca06c4f6e 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
@@ -7,6 +7,10 @@
   min-height: 75px;
 }
 
+#logoutDropdownMenu {
+  background-color: var(--ds-user-menu-bg);
+}
+
 .dropdown-item.active, .dropdown-item:active,
 .dropdown-item:hover, .dropdown-item:focus {
   background-color: transparent !important;
diff --git a/src/app/shared/auth-nav-menu/user-menu/user-menu.component.html b/src/app/shared/auth-nav-menu/user-menu/user-menu.component.html
index 7e3232701bf..b922afdfbc4 100644
--- a/src/app/shared/auth-nav-menu/user-menu/user-menu.component.html
+++ b/src/app/shared/auth-nav-menu/user-menu/user-menu.component.html
@@ -6,8 +6,8 @@
     [ngClass]="inExpandableNavbar ? 'user-menu-mobile pb-2 mb-2 border-bottom' : 'user-menu-dropdown'"
     [attr.aria-label]="'nav.user-profile-menu-and-logout' |translate" id="user-menu-dropdown">
     <li class="ds-menu-item-wrapper username-email-wrapper" role="presentation">
-      {{dsoNameService.getName(user$ | async)}}<br>
-      <span class="text-muted">{{(user$ | async)?.email}}</span>
+      <span class="username-wrapper">{{dsoNameService.getName(user$ | async)}}<br></span>
+      <span class="email-wrapper">{{(user$ | async)?.email}}</span>
     </li>
     <li class="ds-menu-item-wrapper" role="presentation" (click)="onMenuItemClick()">
       <a class="ds-menu-item" role="menuitem"
diff --git a/src/app/shared/auth-nav-menu/user-menu/user-menu.component.scss b/src/app/shared/auth-nav-menu/user-menu/user-menu.component.scss
index 8fa0019bf15..04f16c11dfd 100644
--- a/src/app/shared/auth-nav-menu/user-menu/user-menu.component.scss
+++ b/src/app/shared/auth-nav-menu/user-menu/user-menu.component.scss
@@ -4,42 +4,33 @@
     margin: 0;
     padding: 0;
 
-    &.user-menu-dropdown {
-      .ds-menu-item-wrapper {
-        a.ds-menu-item, &.username-email-wrapper {
-          padding: var(--ds-user-menu-item-vertical-padding) var(--ds-user-menu-dropdown-padding);
-        }
-
-        a.ds-menu-item {
-          display: block;
-          color: var(--ds-expandable-navbar-link-color);
-          &:hover {
-            color: var(--ds-expandable-navbar-link-color-hover);
-            background-color: var(--ds-user-menu-dropdown-link-background-hover);
-          }
-        }
-      }
+    .username-email-wrapper, .ds-menu-item {
+      display: block;
+      padding: var(--ds-user-menu-item-padding);
+      width: 100%;
     }
 
-    &.user-menu-mobile {
-      .ds-menu-item-wrapper {
-        padding-top: var(--ds-user-menu-item-vertical-padding);
-        padding-bottom: var(--ds-user-menu-item-vertical-padding);
+    .username-email-wrapper {
+      background-color: var(--ds-user-menu-user-info-bg);
+      padding: var(--ds-user-menu-item-padding);
+
+      .username-wrapper {
+        color: var(--ds-user-menu-username-color);
       }
 
-      .ds-menu-item {
-        display: inline-block;
+      .email-wrapper {
+        color: var(--ds-user-menu-email-color);
       }
+    }
 
-      .ds-menu-item, .ds-menu-toggler-wrapper {
-        color: var(--ds-expandable-navbar-link-color) !important;
+    .ds-menu-item {
+      color: var(--ds-user-menu-dropdown-link-color);
+      background-color: var(--ds-user-menu-dropdown-link-bg);
 
-        &:hover, &:focus {
-          color: var(--ds-expandable-navbar-link-background-hover) !important;
-        }
+      &:hover, &:focus {
+        color: var(--ds-user-menu-dropdown-link-color-hover);
+        background-color: var(--ds-user-menu-dropdown-link-bg-hover);
       }
-
     }
   }
-
 }
diff --git a/src/styles/_custom_variables.scss b/src/styles/_custom_variables.scss
index 2a536492f19..12ebd2bc9dc 100644
--- a/src/styles/_custom_variables.scss
+++ b/src/styles/_custom_variables.scss
@@ -26,10 +26,7 @@
   --ds-header-icon-color-hover: #{$ds-header-icon-color-hover};
 
   --ds-navbar-bg: #{$ds-navbar-bg};
-  --ds-navbar-item-vertical-padding: 0;
-  --ds-navbar-item-horizontal-padding: 0.25rem;
-  --ds-navbar-dropdown-item-vertical-padding: 0.5rem;
-  --ds-navbar-dropdown-item-horizontal-padding: 1rem;
+  --ds-navbar-item-padding: 0.25rem 0;
   --ds-navbar-link-color: #{$ds-navbar-link-color};
   --ds-navbar-link-bg: var(--ds-navbar-bg);
   --ds-navbar-link-color-hover: #{$ds-navbar-link-color-hover};
@@ -39,16 +36,33 @@
   --ds-header-navbar-border-bottom-height: 1px;
 
   --ds-expandable-navbar-bg: #{$ds-expandable-navbar-bg};
+  --ds-expandable-navbar-padding: 0.5rem .5rem;
   --ds-expandable-navbar-link-color: #{$ds-navbar-link-color};
   --ds-expandable-navbar-link-bg: var(--ds-expandable-navbar-bg);
   --ds-expandable-navbar-link-color-hover: #{$ds-navbar-link-color-hover};
   --ds-expandable-navbar-link-bg-hover: var(--ds-expandable-navbar-link-bg);
-  --ds-expandable-navbar-item-vertical-padding: 0.25rem;
+  --ds-expandable-navbar-item-padding: 0.25rem 0.5rem;
+  @include media-breakpoint-up(md) {
+    --ds-expandable-navbar-padding: 0.5rem 0;
+    --ds-expandable-navbar-item-padding: 0.25rem 0.75rem;
+  }
 
-  --ds-user-menu-item-vertical-padding: 0.25rem;
-  --ds-user-menu-dropdown-padding: 1rem;
-  --ds-user-menu-dropdown-link-color: #{$dark};
-  --ds-user-menu-dropdown-link-background-hover: #{$gray-200};
+  --ds-user-menu-bg: var(--ds-expandable-navbar-bg);
+  --ds-user-menu-item-padding: var(--ds-navbar-item-padding);
+  --ds-user-menu-username-color: var(--bs-body-color);
+  --ds-user-menu-email-color: var(--bs-secondary-color);
+  --ds-user-menu-user-info-bg: var(--ds-user-menu-dropdown-link-bg);
+  --ds-user-menu-dropdown-link-color: var(--ds-navbar-link-color);
+  --ds-user-menu-dropdown-link-bg: var(--ds-navbar-link-bg);
+  --ds-user-menu-dropdown-link-color-hover: var(--ds-navbar-link-color-hover);
+  --ds-user-menu-dropdown-link-bg-hover: var(--ds-navbar-link-bg-hover);
+  @include media-breakpoint-up(md) {
+    --ds-user-menu-item-padding: 0.25rem 1rem;
+    --ds-user-menu-dropdown-link-color: var(--ds-expandable-navbar-link-color);
+    --ds-user-menu-dropdown-link-bg: var(--ds-expandable-navbar-link-bg);
+    --ds-user-menu-dropdown-link-color-hover: var(--ds-expandable-navbar-link-color-hover);
+    --ds-user-menu-dropdown-link-bg-hover: var(--ds-expandable-navbar-link-bg-hover);
+  }
 
   @include media-breakpoint-up(md) {
     --ds-header-logo-height: 50px;
diff --git a/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.scss b/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.scss
index d969c45586a..ffa1ad398c4 100644
--- a/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.scss
+++ b/src/themes/dspace/app/header-nav-wrapper/header-navbar-wrapper.component.scss
@@ -20,87 +20,14 @@
         min-height: var(--ds-expandable-navbar-height);
         height: auto;
         border-bottom: var(--ds-header-navbar-border-bottom-style);
+        background-color: var(--ds-navbar-bg);
       }
     }
   }
 
-  /* MENU ITEMS */
-
-  ::ng-deep {
-    .ds-menu-item, .ds-menu-toggler-wrapper {
+  ::ng-deep ds-user-menu {
+    .ds-menu-item {
       text-decoration: none;
     }
-
-    nav#desktop-navbar { // in header component
-      #main-site-navigation {
-        /* Desktop menu */
-
-        .ds-menu-item-wrapper, .ds-menu-item, .ds-menu-toggler-wrapper {
-          // fill navbar height (required by dropdown menus) and center content
-          display: flex;
-          align-items: center;
-          height: 100%;
-        }
-        .ds-menu-item {
-          // define here the style for top-level navbar menu items
-          padding: var(--ds-navbar-item-vertical-padding) var(--ds-navbar-item-horizontal-padding);
-        }
-
-        .ds-menu-item-wrapper {
-          color: var(--ds-navbar-link-color);
-          background-color: var(--ds-navbar-link-bg);
-
-          .toggle-menu-icon, .ds-menu-item:not(.dropdown-menu .ds-menu-item) {
-            color: var(--ds-navbar-link-color);
-          }
-
-          &:hover, &:focus {
-            color: var(--ds-navbar-link-color-hover);
-            background-color: var(--ds-navbar-link-bg-hover);
-
-            .toggle-menu-icon, .ds-menu-item:not(.dropdown-menu .ds-menu-item) {
-              color: var(--ds-navbar-link-color-hover);
-            }
-
-            .dropdown-menu {
-              background-color: var(--ds-expandable-navbar-bg);
-
-              .ds-menu-item {
-                color: var(--ds-expandable-navbar-link-color);
-                background-color: var(--ds-expandable-navbar-link-bg);
-
-                &:hover, &:focus {
-                  color: var(--ds-expandable-navbar-link-color-hover);
-                  background-color: var(--ds-expandable-navbar-link-bg-hover);
-                }
-              }
-            }
-          }
-        }
-
-        /* desktop submenu */
-
-        .dropdown-menu {
-          .ds-menu-item {
-            // define here the style for second-level navbar menu items
-            padding: var(--ds-navbar-dropdown-item-vertical-padding) var(--ds-navbar-dropdown-item-horizontal-padding);
-          }
-        }
-
-      }
-    }
-
-    nav#collapsible-mobile-navbar { // in header-navbar-wrapper component
-
-      border-top: var(--ds-expandable-navbar-border-top-style);
-      padding-top: var(--ds-expandable-navbar-padding-top);
-
-      #main-site-navigation {
-        .ds-menu-item {
-          padding: var(--ds-expandable-navbar-item-vertical-padding) 0;
-        }
-      }
-
-    }
   }
 }
diff --git a/src/themes/dspace/app/navbar/navbar.component.scss b/src/themes/dspace/app/navbar/navbar.component.scss
index 32c65c8c978..5667d95e8d5 100644
--- a/src/themes/dspace/app/navbar/navbar.component.scss
+++ b/src/themes/dspace/app/navbar/navbar.component.scss
@@ -1,3 +1,54 @@
-:host {
+:host-context(#desktop-navbar) ::ng-deep #main-site-navigation {
+  .ds-menu-item-wrapper, .ds-menu-item, .ds-menu-toggler-wrapper {
+    // fill navbar height (required by dropdown menus) and center content
+    display: flex;
+    align-items: center;
+    height: 100%;
+  }
+}
+
+#main-site-navigation ::ng-deep {
+  .ds-menu-toggler-wrapper {
+    text-decoration: none;
+  }
+
+  .ds-menu-item {
+    text-decoration: none;
+    display: block;
+    width: 100%;
+
+    &:not(.dropdown-menu .ds-menu-item) {
+      padding: var(--ds-navbar-item-padding);
+    }
+  }
+}
+
+#main-site-navigation ::ng-deep .ds-menu-item-wrapper:not(ds-user-menu .ds-menu-item-wrapper) {
+  background-color: var(--ds-navbar-link-bg);
+
+  .toggle-menu-icon, .ds-menu-item:not(.dropdown-menu .ds-menu-item) {
+    color: var(--ds-navbar-link-color);
+  }
+
+  &:hover, &:focus {
+    background-color: var(--ds-navbar-link-bg-hover);
+
+    .toggle-menu-icon, .ds-menu-item:not(.dropdown-menu .ds-menu-item) {
+      color: var(--ds-navbar-link-color-hover);
+    }
+
+    .dropdown-menu {
+      background-color: var(--ds-expandable-navbar-bg);
+
+      .ds-menu-item {
+        color: var(--ds-expandable-navbar-link-color);
+        background-color: var(--ds-expandable-navbar-link-bg);
 
+        &:hover, &:focus {
+          color: var(--ds-expandable-navbar-link-color-hover);
+          background-color: var(--ds-expandable-navbar-link-bg-hover);
+        }
+      }
+    }
+  }
 }

From 77eba54cd74654304021755a8423f808cb0a1a82 Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Sat, 18 Apr 2026 22:21:14 +0200
Subject: [PATCH 4/4] 139606: Match the old navbar spacing & use custom color
 variables for the user menu

---
 src/styles/_bootstrap_variables.scss |  4 ++++
 src/styles/_custom_variables.scss    | 13 +++++++------
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/styles/_bootstrap_variables.scss b/src/styles/_bootstrap_variables.scss
index 84eca3c423c..123c903af3a 100644
--- a/src/styles/_bootstrap_variables.scss
+++ b/src/styles/_bootstrap_variables.scss
@@ -93,6 +93,10 @@ $ds-expandable-navbar-bg: #fff !default;
 $ds-navbar-link-color: $link-color !default;
 $ds-navbar-link-color-hover: #{darken($ds-navbar-link-color, 15%)} !default;
 
+$ds-user-menu-bg: #fff !default;
+$ds-user-menu-link-color: $link-color !default;
+$ds-user-menu-link-color-hover: #{darken($ds-user-menu-link-color, 15%)} !default;
+
 $ds-slider-color: darken(#94BA65, 17%) !default;
 $ds-slider-handle-color: darken(#2B4E72, 17%) !default;
 
diff --git a/src/styles/_custom_variables.scss b/src/styles/_custom_variables.scss
index 12ebd2bc9dc..c5e3d80cbad 100644
--- a/src/styles/_custom_variables.scss
+++ b/src/styles/_custom_variables.scss
@@ -26,7 +26,7 @@
   --ds-header-icon-color-hover: #{$ds-header-icon-color-hover};
 
   --ds-navbar-bg: #{$ds-navbar-bg};
-  --ds-navbar-item-padding: 0.25rem 0;
+  --ds-navbar-item-padding: 0.5rem 0.25rem;
   --ds-navbar-link-color: #{$ds-navbar-link-color};
   --ds-navbar-link-bg: var(--ds-navbar-bg);
   --ds-navbar-link-color-hover: #{$ds-navbar-link-color-hover};
@@ -44,7 +44,7 @@
   --ds-expandable-navbar-item-padding: 0.25rem 0.5rem;
   @include media-breakpoint-up(md) {
     --ds-expandable-navbar-padding: 0.5rem 0;
-    --ds-expandable-navbar-item-padding: 0.25rem 0.75rem;
+    --ds-expandable-navbar-item-padding: 0.5rem 0.75rem;
   }
 
   --ds-user-menu-bg: var(--ds-expandable-navbar-bg);
@@ -57,11 +57,12 @@
   --ds-user-menu-dropdown-link-color-hover: var(--ds-navbar-link-color-hover);
   --ds-user-menu-dropdown-link-bg-hover: var(--ds-navbar-link-bg-hover);
   @include media-breakpoint-up(md) {
+    --ds-user-menu-bg: #{$ds-user-menu-bg};
     --ds-user-menu-item-padding: 0.25rem 1rem;
-    --ds-user-menu-dropdown-link-color: var(--ds-expandable-navbar-link-color);
-    --ds-user-menu-dropdown-link-bg: var(--ds-expandable-navbar-link-bg);
-    --ds-user-menu-dropdown-link-color-hover: var(--ds-expandable-navbar-link-color-hover);
-    --ds-user-menu-dropdown-link-bg-hover: var(--ds-expandable-navbar-link-bg-hover);
+    --ds-user-menu-dropdown-link-color: #{$ds-user-menu-link-color};
+    --ds-user-menu-dropdown-link-bg: var(--ds-user-menu-bg);
+    --ds-user-menu-dropdown-link-color-hover: #{$ds-user-menu-link-color-hover};
+    --ds-user-menu-dropdown-link-bg-hover: var(--ds-user-menu-bg);
   }
 
   @include media-breakpoint-up(md) {