How to do custom CSS on Navigation(Layout) Sidebar

Ask for Help
1

i have been looking for custom css case on sidebar layout but no case related found.
p.s. Now using as enterprise

2

@Himaladin I remember you did something right?

1 Like
3

I don’t fully understand what you’re trying to achieve. Could you please clarify?

3 Likes
4

Hi @Himaladin I just want to layer my layout, the left most menu on webapp screen.
Just asked if it possible to adjust by using custom CSS, Like Menu and Sub layer Or title and more separate line

image
image1061×720 21.6 KB

5

Before diving in, could you clarify whether you want those sub-menus to be limited expandable/collapsible (only one open at a time, not fully toggleable), or just visually grouped with indentation or divider lines?

Also, how should it behave on mobile — should the same hierarchy appear in the side menu, or be simplified as a flat list?

This is quite a tricky layout to handle with CSS. I explored a similar idea earlier here: Group Tabs on Desktop Menu Tab Bar using CSS.
I haven’t re-tested that code recently, so some parts may need adjustment for the current Glide DOM.

6

If you’d like to achieve something like what appears in your image, you can try this CSS:

Screenshot 2025-11-10 192728
Screenshot 2025-11-10 192728346×587 22.3 KB

/* ====== 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(.mobile-layer) .sidebar-root li:nth-of-type(1) {
  padding-top: 1.5rem;
}

/* Section 2 & 3: padding-top + border-top */
#page-root:not(.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(.mobile-layer) .sidebar-root li:nth-of-type(1)::before {content: "Section 1";}
#page-root:not(.mobile-layer) .sidebar-root li:nth-of-type(4)::before {content: "Section 2";}
#page-root:not(.mobile-layer) .sidebar-root li:nth-of-type(7)::before {content: "Section 3";}

/* Hide default hr dividers */
#page-root:not(.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.

1 Like