Override Bootstrap dropdown CSS variables completely: no borders, no radius, no shadow, auto-width

- Set --bs-dropdown-min-width: 0 (width adapts to content)
- Set --bs-dropdown-border-width: 0 (no borders)
- Set --bs-dropdown-border-radius: 0 (no rounded corners)
- Set --bs-dropdown-box-shadow: none (no shadow)
- Set --bs-dropdown-padding-x/y: 0 (no padding)
- white-space: nowrap and width: auto on dropdown-item
- Same overrides on submenu dropdown-menu
This commit is contained in:
2026-08-11 16:30:26 +02:00
parent e9d2ec64bb
commit 2d61f9bab6
3 changed files with 40 additions and 4 deletions
+13 -1
View File
@@ -69,18 +69,26 @@
} }
.dropdown-menu { .dropdown-menu {
--bs-dropdown-min-width: 0;
--bs-dropdown-padding-x: 0;
--bs-dropdown-padding-y: 0;
--bs-dropdown-border-width: 0;
--bs-dropdown-border-radius: 0;
--bs-dropdown-box-shadow: none;
background-color: var(--header-bg) !important; background-color: var(--header-bg) !important;
border: none !important; border: none !important;
border-radius: 0 !important; border-radius: 0 !important;
padding: 0 !important; padding: 0 !important;
margin: 0 !important; margin: 0 !important;
min-width: 0 !important; min-width: 0 !important;
box-shadow: none !important;
} }
.dropdown-item { .dropdown-item {
color: var(--header-font) !important; color: var(--header-font) !important;
border-radius: 0 !important; border-radius: 0 !important;
padding: 0.5rem 1rem; padding: 0.4rem 1rem;
white-space: nowrap; white-space: nowrap;
width: auto;
} }
.dropdown-item:hover, .dropdown-item:focus { .dropdown-item:hover, .dropdown-item:focus {
background-color: rgba(255, 255, 255, 0.1) !important; background-color: rgba(255, 255, 255, 0.1) !important;
@@ -310,8 +318,12 @@ pre code {
margin-top: 0; margin-top: 0;
margin-left: 0; margin-left: 0;
display: none; display: none;
--bs-dropdown-border-width: 0;
--bs-dropdown-border-radius: 0;
--bs-dropdown-box-shadow: none;
border: none !important; border: none !important;
border-radius: 0 !important; border-radius: 0 !important;
box-shadow: none !important;
} }
.dropdown-submenu:hover > .dropdown-menu { .dropdown-submenu:hover > .dropdown-menu {
display: block; display: block;
+13 -1
View File
@@ -69,18 +69,26 @@
} }
.dropdown-menu { .dropdown-menu {
--bs-dropdown-min-width: 0;
--bs-dropdown-padding-x: 0;
--bs-dropdown-padding-y: 0;
--bs-dropdown-border-width: 0;
--bs-dropdown-border-radius: 0;
--bs-dropdown-box-shadow: none;
background-color: var(--header-bg) !important; background-color: var(--header-bg) !important;
border: none !important; border: none !important;
border-radius: 0 !important; border-radius: 0 !important;
padding: 0 !important; padding: 0 !important;
margin: 0 !important; margin: 0 !important;
min-width: 0 !important; min-width: 0 !important;
box-shadow: none !important;
} }
.dropdown-item { .dropdown-item {
color: var(--header-font) !important; color: var(--header-font) !important;
border-radius: 0 !important; border-radius: 0 !important;
padding: 0.5rem 1rem; padding: 0.4rem 1rem;
white-space: nowrap; white-space: nowrap;
width: auto;
} }
.dropdown-item:hover, .dropdown-item:focus { .dropdown-item:hover, .dropdown-item:focus {
background-color: rgba(255, 255, 255, 0.1) !important; background-color: rgba(255, 255, 255, 0.1) !important;
@@ -310,8 +318,12 @@ pre code {
margin-top: 0; margin-top: 0;
margin-left: 0; margin-left: 0;
display: none; display: none;
--bs-dropdown-border-width: 0;
--bs-dropdown-border-radius: 0;
--bs-dropdown-box-shadow: none;
border: none !important; border: none !important;
border-radius: 0 !important; border-radius: 0 !important;
box-shadow: none !important;
} }
.dropdown-submenu:hover > .dropdown-menu { .dropdown-submenu:hover > .dropdown-menu {
display: block; display: block;
+14 -2
View File
@@ -106,21 +106,29 @@ $header-bg-opacity: 1;
} }
} }
// Language dropdown styling // Dropdown menu styling — override Bootstrap variables completely
.dropdown-menu { .dropdown-menu {
--bs-dropdown-min-width: 0;
--bs-dropdown-padding-x: 0;
--bs-dropdown-padding-y: 0;
--bs-dropdown-border-width: 0;
--bs-dropdown-border-radius: 0;
--bs-dropdown-box-shadow: none;
background-color: var(--header-bg) !important; background-color: var(--header-bg) !important;
border: none !important; border: none !important;
border-radius: 0 !important; border-radius: 0 !important;
padding: 0 !important; padding: 0 !important;
margin: 0 !important; margin: 0 !important;
min-width: 0 !important; min-width: 0 !important;
box-shadow: none !important;
} }
.dropdown-item { .dropdown-item {
color: var(--header-font) !important; color: var(--header-font) !important;
border-radius: 0 !important; border-radius: 0 !important;
padding: 0.5rem 1rem; padding: 0.4rem 1rem;
white-space: nowrap; white-space: nowrap;
width: auto;
&:hover, &:focus { &:hover, &:focus {
background-color: rgba(255, 255, 255, 0.1) !important; background-color: rgba(255, 255, 255, 0.1) !important;
@@ -313,8 +321,12 @@ $header-bg-opacity: 1;
margin-top: 0; margin-top: 0;
margin-left: 0; margin-left: 0;
display: none; display: none;
--bs-dropdown-border-width: 0;
--bs-dropdown-border-radius: 0;
--bs-dropdown-box-shadow: none;
border: none !important; border: none !important;
border-radius: 0 !important; border-radius: 0 !important;
box-shadow: none !important;
} }
// Open submenu on hover (desktop) // Open submenu on hover (desktop)