If you’d like to achieve something like what appears in your image, you can try this CSS:
/* ====== Sidebar Navigation Styling (Desktop Only) ====== */
/* Common ::before styling for all Sections */
#page-root:not(.mobile-layer) .sidebar-root li:is(:nth-of-type(1), :nth-of-type(4), :nth-of-type(7))::before {
position: absolute;
margin-top: -20px;
font-size: 0.75rem;
color: white;
}
/* Section 1 */
#page-root:not(:has(.mobile-layer)) .sidebar-root li:nth-of-type(1) {
padding-top: 1.5rem;
}
/* Section 2 & 3: padding-top + border-top */
#page-root:not(:has(.mobile-layer)) .sidebar-root li:is(:nth-of-type(4), :nth-of-type(7)) {
padding-top: 1.5rem;
border-top: 1px solid gray;
}
/* Section 1, 2 & 3: ::before content */
#page-root:not(:has(.mobile-layer)) .sidebar-root li:nth-of-type(1)::before {content: "Section 1";}
#page-root:not(:has(.mobile-layer)) .sidebar-root li:nth-of-type(4)::before {content: "Section 2";}
#page-root:not(:has(.mobile-layer)) .sidebar-root li:nth-of-type(7)::before {content: "Section 3";}
/* Hide default hr dividers */
#page-root:not(:has(.mobile-layer)) .sidebar-root hr {
display: none;
}
This version targets only the desktop sidebar and won’t interfere with mobile navigation.
You can freely adjust the section labels or nth-of-type() numbers based on your actual tab order.