Feb 12, 2023
Back to all Elements
Using a CSS inject Chrome extension, to add some CSS and reposition, reorder and organize the Workspaces dropdown.
The only way (I could think of) to target a specific Workspaces is by the icon, which we will use as a unique identifier. Make sure each of the workspaces you want to order, has an icon and not the default Webflow one.
Now we can use that icon's URL to target the workspace. Copy the icon's url (right click the icon and 'Open image in a new tab') and place it in the CSS code instead of where it says "THE_URL_OF_THE_ICON_OF_THE_WORKSPACE_YOU_WANT_TO_BE_1st". Do that for each workspace you want to order.
Enjoy :D
@media (min-width: 1860px) {
.page-header ng-include.ng-scope {
position: absolute;
left: 16px;
}
.workspace-switcher.ng-scope ul.dropdown-menu.ng-scope {
display: flex !important;
flex-direction: column;
opacity: 1 !important;
overflow-y: scroll;
max-height: 85vh;
}
.option.ng-scope {
order: 10;
position: relative;
}
/* Selected Workspace will be placed at top of the list */
.option.ng-scope.selected {
order: 1;
border-bottom: none !important;
margin-bottom: 16px;
}
.option.ng-scope.selected:after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
right: 0;
width: 100%;
height: 2px;
background: #4253ff;
}
.option.ng-scope:has(img[src='THE_URL_OF_THE_ICON_OF_THE_WORKSPACE_YOU_WANT_TO_BE_1st']) {
order: 2;
}
.option.ng-scope:has(img[src='THE_URL_OF_THE_ICON_OF_THE_WORKSPACE_YOU_WANT_TO_BE_2nd']) {
order: 3;
}
.option.ng-scope:has(img[src='THE_URL_OF_THE_ICON_OF_THE_WORKSPACE_YOU_WANT_TO_BE_3rd']) {
order: 4;
}
.option.ng-scope:has(img[src='THE_URL_OF_THE_ICON_OF_THE_WORKSPACE_YOU_WANT_TO_BE_4th']) {
order: 5;
}
.option.ng-scope:has(img[src='THE_URL_OF_THE_ICON_OF_THE_WORKSPACE_YOU_WANT_TO_BE_5th']) {
order: 6;
}
.option.ng-scope:has(img[src='THE_URL_OF_THE_ICON_OF_THE_WORKSPACE_YOU_WANT_TO_BE_6th']) {
order: 7;
}
.option.ng-scope:has(img[src='THE_URL_OF_THE_ICON_OF_THE_WORKSPACE_YOU_WANT_TO_BE_7th']) {
order: 8;
}
.option.ng-scope:has(img[src='THE_URL_OF_THE_ICON_OF_THE_WORKSPACE_YOU_WANT_TO_BE_8th']) {
order: 9;
border-bottom: none !important;
margin-bottom: 16px;
}
.option.ng-scope:has(img[src=""]):after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
right: 0;
width: 100%;
height: 2px;
background: #4253ff;
}
}
When your bath soap bar gets too small to use, don't throw it away! open the next bar, and when you finish showering, stick the small old bar to the back of the new bar. Onces they both dry, they will become one.
.png)
.png)
.png)