# How to do custom CSS on Navigation(Layout) Sidebar

**URL:** <https://community.glideapps.com/t/how-to-do-custom-css-on-navigation-layout-sidebar/85274>\
**Category:** Ask for Help\
**Created:** [November 7, 2025, 10:58am UTC](https://community.glideapps.com/t/how-to-do-custom-css-on-navigation-layout-sidebar/85274 "2025-11-07T10:58:19Z")\
**Posts on this page:** 1\
**Showing post:** 6

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [November 10, 2025, 12:44pm UTC](https://community.glideapps.com/t/how-to-do-custom-css-on-navigation-layout-sidebar/85274/6 "2025-11-10T12:44:59Z")

</div>

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

 ![Screenshot 2025-11-10 192728](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/6/064413195a053e46f1db3dc10a9ca847e1674991.png)

```auto
/* ====== 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.

---

_[View the full topic](https://community.glideapps.com/t/how-to-do-custom-css-on-navigation-layout-sidebar/85274)._