From c38d33b5f86306ec2fcd0634f032df441c8a1856 Mon Sep 17 00:00:00 2001
From: ZHU Yuhui <zhuyh97@gmail.com>
Date: Fri, 7 Nov 2025 22:18:08 +0100
Subject: [PATCH] Background color of active dropdown menu items in navbar
 (#3250)

As reported in Issue #3249, This pull request fixes a issue that makes
the active navbar dropdown menu item unable to follow the global
background color settings.

It achieves this by merging the definition of `.navbar .dropdown-menu`
and `.btn-group.dropdown .dropdown-menu` in the `_base.scss`. This
should not affect the looking of the dropdown menu in a button.

**Before:**
<img width="274" height="194" alt="before"
src="https://github.com/user-attachments/assets/4fa59325-8dc9-4156-a8f6-293ce467d00d"
/>

**After:**
<img width="274" height="194" alt="after"
src="https://github.com/user-attachments/assets/5bcf16bc-0b3e-4b27-b5f2-95ae50f3e40f"
/>

**Button dropdown menu:**
<img width="316" height="241" alt="button"
src="https://github.com/user-attachments/assets/5609e568-1635-491d-8451-354e48eed9c5"
/>
---
 _sass/_base.scss | 36 ++++++++++++------------------------
 1 file changed, 12 insertions(+), 24 deletions(-)

diff --git a/_sass/_base.scss b/_sass/_base.scss
index 4b58c59..ea125e2 100644
--- a/_sass/_base.scss
+++ b/_sass/_base.scss
@@ -250,7 +250,8 @@ ul.task-list input[type="checkbox"] {
   opacity: 0.95;
 }
 
-.navbar .dropdown-menu {
+.navbar .dropdown-menu,
+.btn-group.dropdown .dropdown-menu {
   background-color: var(--global-bg-color);
   border: 1px solid var(--global-divider-color);
 
@@ -276,6 +277,16 @@ ul.task-list input[type="checkbox"] {
   }
 }
 
+.dropdown-item.active,
+.dropdown-item:active {
+  background-color: var(--global-hover-color);
+  color: var(--global-hover-text-color) !important;
+
+  &:hover {
+    color: var(--global-hover-text-color);
+  }
+}
+
 .navbar.navbar-light {
   a {
     &:hover {
@@ -1041,29 +1052,6 @@ progress::-moz-progress-bar {
       color: var(--global-hover-text-color) !important;
     }
   }
-
-  .dropdown-menu {
-    background-color: var(--global-bg-color);
-  }
-
-  .dropdown-item {
-    background-color: var(--global-bg-color);
-    color: var(--global-text-color);
-
-    &:hover {
-      color: var(--global-hover-color);
-    }
-  }
-
-  .dropdown-item.active,
-  .dropdown-item:active {
-    background-color: var(--global-hover-color);
-    color: var(--global-hover-text-color) !important;
-
-    &:hover {
-      color: var(--global-hover-text-color);
-    }
-  }
 }
 
 /* Table of Contents */