E.Noorlander/CodePress
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix dropdown width: width: max-content on menu, width: 100% on items

Browse Source 
- dropdown-menu: width: max-content (menu adapts to longest item)
- dropdown-item: width: 100% (items fill menu width)
- Same for submenu dropdown-menu
This commit is contained in:
E.Noorlander
2026-08-11 16:43:13 +02:00
parent a9388df019
commit 689a1a5d81
3 changed files with 12 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
themes/default/assets/css/theme.css
+4 -1
View File
@@ -82,13 +82,15 @@
margin: 0 !important; margin: 0 !important;
min-width: 0 !important; min-width: 0 !important;
box-shadow: none !important; box-shadow: none !important;
width: max-content;
} }
.dropdown-item { .dropdown-item {
color: var(--header-font) !important; color: var(--header-font) !important;
border-radius: 0 !important; border-radius: 0 !important;
padding: 0.4rem 1rem; padding: 0.4rem 1rem;
white-space: nowrap; white-space: nowrap;
width: auto; display: block;
width: 100%;
} }
.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;
@@ -322,6 +324,7 @@ pre code {
border: none !important; border: none !important;
border-radius: 0 !important; border-radius: 0 !important;
box-shadow: none !important; box-shadow: none !important;
width: max-content;
} }
.dropdown-submenu:hover > .dropdown-menu { .dropdown-submenu:hover > .dropdown-menu {
display: block; display: block;
themes/default/assets/css_compiled/theme.css
+4 -1
View File
@@ -82,13 +82,15 @@
margin: 0 !important; margin: 0 !important;
min-width: 0 !important; min-width: 0 !important;
box-shadow: none !important; box-shadow: none !important;
width: max-content;
} }
.dropdown-item { .dropdown-item {
color: var(--header-font) !important; color: var(--header-font) !important;
border-radius: 0 !important; border-radius: 0 !important;
padding: 0.4rem 1rem; padding: 0.4rem 1rem;
white-space: nowrap; white-space: nowrap;
width: auto; display: block;
width: 100%;
} }
.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;
@@ -322,6 +324,7 @@ pre code {
border: none !important; border: none !important;
border-radius: 0 !important; border-radius: 0 !important;
box-shadow: none !important; box-shadow: none !important;
width: max-content;
} }
.dropdown-submenu:hover > .dropdown-menu { .dropdown-submenu:hover > .dropdown-menu {
display: block; display: block;
themes/default/assets/scss/theme.scss
+4 -1
View File
@@ -121,6 +121,7 @@ $header-bg-opacity: 1;
margin: 0 !important; margin: 0 !important;
min-width: 0 !important; min-width: 0 !important;
box-shadow: none !important; box-shadow: none !important;
width: max-content;
} }
.dropdown-item { .dropdown-item {
@@ -128,7 +129,8 @@ $header-bg-opacity: 1;
border-radius: 0 !important; border-radius: 0 !important;
padding: 0.4rem 1rem; padding: 0.4rem 1rem;
white-space: nowrap; white-space: nowrap;
width: auto; display: block;
width: 100%;
&:hover, &:focus { &:hover, &:focus {
background-color: rgba(255, 255, 255, 0.1) !important; background-color: rgba(255, 255, 255, 0.1) !important;
@@ -325,6 +327,7 @@ $header-bg-opacity: 1;
border: none !important; border: none !important;
border-radius: 0 !important; border-radius: 0 !important;
box-shadow: none !important; box-shadow: none !important;
width: max-content;
} }
// Open submenu on hover (desktop) // Open submenu on hover (desktop)