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

Remove dropdown borders, auto-width to content, nowrap items

Browse Source 
- border: none on all dropdown-menu (no borders)
- min-width: 0 (width adapts to longest item title)
- white-space: nowrap on dropdown-item
- Remove border-left on mobile submenus
This commit is contained in:
E.Noorlander
2026-08-11 11:36:48 +02:00
parent 8a0637eddc
commit e9d2ec64bb
3 changed files with 21 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
themes/default/assets/css/theme.css
+7 -8
View File
@@ -70,15 +70,17 @@
.dropdown-menu { .dropdown-menu {
background-color: var(--header-bg) !important; background-color: var(--header-bg) !important;
border: 1px solid var(--header-font) !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;
} }
.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.5rem 1rem;
white-space: nowrap;
} }
.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;
@@ -305,9 +307,10 @@ pre code {
.dropdown-submenu > .dropdown-menu { .dropdown-submenu > .dropdown-menu {
top: 0; top: 0;
left: 100%; left: 100%;
margin-top: -1px; margin-top: 0;
margin-left: 0; margin-left: 0;
display: none; display: none;
border: none !important;
border-radius: 0 !important; border-radius: 0 !important;
} }
.dropdown-submenu:hover > .dropdown-menu { .dropdown-submenu:hover > .dropdown-menu {
@@ -320,18 +323,14 @@ pre code {
float: right; float: right;
margin-top: 0.25rem; margin-top: 0.25rem;
} }
.dropdown-menu .dropdown-item {
width: 100%;
white-space: nowrap;
}
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
.dropdown-submenu > .dropdown-menu { .dropdown-submenu > .dropdown-menu {
left: 0; left: 0;
top: 100%; top: 100%;
margin-top: 0; margin-top: 0;
margin-left: 1rem; margin-left: 1rem;
border: none; border: none !important;
border-left: 2px solid rgba(255, 255, 255, 0.2); border-radius: 0 !important;
box-shadow: none; box-shadow: none;
} }
.dropdown-submenu:hover > .dropdown-menu { .dropdown-submenu:hover > .dropdown-menu {
themes/default/assets/css_compiled/theme.css
+7 -8
View File
@@ -70,15 +70,17 @@
.dropdown-menu { .dropdown-menu {
background-color: var(--header-bg) !important; background-color: var(--header-bg) !important;
border: 1px solid var(--header-font) !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;
} }
.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.5rem 1rem;
white-space: nowrap;
} }
.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;
@@ -305,9 +307,10 @@ pre code {
.dropdown-submenu > .dropdown-menu { .dropdown-submenu > .dropdown-menu {
top: 0; top: 0;
left: 100%; left: 100%;
margin-top: -1px; margin-top: 0;
margin-left: 0; margin-left: 0;
display: none; display: none;
border: none !important;
border-radius: 0 !important; border-radius: 0 !important;
} }
.dropdown-submenu:hover > .dropdown-menu { .dropdown-submenu:hover > .dropdown-menu {
@@ -320,18 +323,14 @@ pre code {
float: right; float: right;
margin-top: 0.25rem; margin-top: 0.25rem;
} }
.dropdown-menu .dropdown-item {
width: 100%;
white-space: nowrap;
}
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
.dropdown-submenu > .dropdown-menu { .dropdown-submenu > .dropdown-menu {
left: 0; left: 0;
top: 100%; top: 100%;
margin-top: 0; margin-top: 0;
margin-left: 1rem; margin-left: 1rem;
border: none; border: none !important;
border-left: 2px solid rgba(255, 255, 255, 0.2); border-radius: 0 !important;
box-shadow: none; box-shadow: none;
} }
.dropdown-submenu:hover > .dropdown-menu { .dropdown-submenu:hover > .dropdown-menu {
themes/default/assets/scss/theme.scss
+7 -10
View File
@@ -109,16 +109,18 @@ $header-bg-opacity: 1;
// Language dropdown styling // Language dropdown styling
.dropdown-menu { .dropdown-menu {
background-color: var(--header-bg) !important; background-color: var(--header-bg) !important;
border: 1px solid var(--header-font) !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;
} }
.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.5rem 1rem;
white-space: nowrap;
&:hover, &:focus { &:hover, &:focus {
background-color: rgba(255, 255, 255, 0.1) !important; background-color: rgba(255, 255, 255, 0.1) !important;
@@ -308,9 +310,10 @@ $header-bg-opacity: 1;
> .dropdown-menu { > .dropdown-menu {
top: 0; top: 0;
left: 100%; left: 100%;
margin-top: -1px; margin-top: 0;
margin-left: 0; margin-left: 0;
display: none; display: none;
border: none !important;
border-radius: 0 !important; border-radius: 0 !important;
} }
@@ -331,12 +334,6 @@ $header-bg-opacity: 1;
} }
} }
// Ensure dropdown items fill width and no gaps
.dropdown-menu .dropdown-item {
width: 100%;
white-space: nowrap;
}
// Mobile: submenu appears below instead of beside, open on tap // Mobile: submenu appears below instead of beside, open on tap
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
.dropdown-submenu > .dropdown-menu { .dropdown-submenu > .dropdown-menu {
@@ -344,8 +341,8 @@ $header-bg-opacity: 1;
top: 100%; top: 100%;
margin-top: 0; margin-top: 0;
margin-left: 1rem; margin-left: 1rem;
border: none; border: none !important;
border-left: 2px solid rgba(255, 255, 255, 0.2); border-radius: 0 !important;
box-shadow: none; box-shadow: none;
} }
.dropdown-submenu:hover > .dropdown-menu { .dropdown-submenu:hover > .dropdown-menu {